Select only one checkbox in group

问题

I need in html select only one checkbox in a group. I find my example. But I can't realize it. It doesn't works. Here is my example: example

Here is my code HTML:

    <div>
            <li>
                <div class="radio">
                    <label>
                    <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">
                    Сотовый телефон имеется
                    </label>
                </div>
            </li>
            <li>
                <div class="radio">
                    <label>
                    <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">
                    Сотовый телефон не имеется
                    </label>
                </div>
            </li>
    <div>

And code jquery:

$("input:checkbox").on('click', function() {
        // in the handler, 'this' refers to the box clicked on
        var $box = $(this);
        if ($box.is(":checked")) {
        // the name of the box is retrieved using the .attr() method
        // as it is assumed and expected to be immutable
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        // the checked state of the group/box on the other hand will change
        // and the current value is retrieved using .prop() method
        $(group).prop("checked", false);
        $box.prop("checked", true);
   } 
   else {
        $box.prop("checked", false);
   }
});

Any help plz.

回答1:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $("input:checkbox").on('click', function() {
      // in the handler, 'this' refers to the box clicked on
      var $box = $(this);
      if ($box.is(":checked")) {
        // the name of the box is retrieved using the .attr() method
        // as it is assumed and expected to be immutable
        var group = "input:checkbox[name='" + $box.attr("name") + "']";
        // the checked state of the group/box on the other hand will change
        // and the current value is retrieved using .prop() method
        $(group).prop("checked", false);
        $box.prop("checked", true);
      } else {
        $box.prop("checked", false);
      }
    });
  });
</script>
<form>
  <div>
    <li>
      <div class="radio">
        <label>
          <input type="checkbox" name="mobil[1][]" id="optionsRadios1" value="1" checked class="radi">Сотовый телефон имеется
        </label>
      </div>
    </li>
    <li>
      <div class="radio">
        <label>
          <input type="checkbox" name="mobil[1][]" id="optionsRadios2" value="0" class="radi">Сотовый телефон не имеется
        </label>
      </div>
    </li>
    <div>
</form>

Your provided sample works here.

回答2:

$(function(){
				
		$("input[name='fruit[]']").change(function(e) {
			if($('input[name="fruit[]"]:checked').length==1) {
				$("input[name='fruit[]']:not(:checked)").attr("disabled", true);
			} else {
				$("input[name='fruit[]']:not(:checked)").attr("disabled", false);
			}
		});		
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html>
<head>

</head>
<body>
	<form>		
		
	   <input type="checkbox" name="fruit[]" value="orange"> Orange
       <input type="checkbox" name="fruit[]" value="apple"> Apple
       <input type="checkbox" name="fruit[]" value="grapefruit"> Grapefruit
       <input type="checkbox" name="fruit[]" value="banana"> Banana
       <input type="checkbox" name="fruit[]" value="watermelon"> Watermelon
	   <input type="checkbox" name="fruit[]" value="watermelon"> Papaya 
	</form>
	
</body>
</html>

回答3:

Radio Buttons are designed for exactly that functionality

Have a look at http://www.w3schools.com/html/html_forms.asp

Taken from the link

<form>
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
</form>

As long as they share the same name attribute you will see the desired behaviour.

If you want to only allow a single checkbox to be checked, but to allow 0 values, and for the user to uncheck one value without checking another then you could do it like this:

 $("input:checkbox").on('click', function() {

    var $box = $(this);
    if ($box.is(":checked")) 
    {

    // set all elements matching the name to unchecked        
    $("input:checkbox[name='mobil[1][]']").prop("checked", false)

    // set the orginally checked box back to 'checked'       
    $box.prop("checked", true);
   } 
   else 
   {
      $box.prop("checked", false);
   }
});

回答4:

Use radio buttons instead of checkboxes - this is exactly what they're designed to do!

$("#uncheck").click(function() {
  $("input[name=onlyselectone]").prop("checked", false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="radio" name="onlyselectone" value="1"/>1
<br />
<input type="radio" name="onlyselectone" value="2"/>2
<br />
<input type="radio" name="onlyselectone" value="3"/>3
<br />
<input type="button" id="uncheck" value="Uncheck" />

Added a little snippet of JQuery to "uncheck" the values, if required.

来源：https://stackoverflow.com/questions/29389971/select-only-one-checkbox-in-group

标签

jquery

html