只選擇組中的一個複選框

Question

我需要在html中只選擇一個組中的一個複選框。 我找到我的例子。但我無法意識到它。它不起作用。 這是我的例子：example

這裏是我的代碼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> 

和代碼的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); 
    } 
}); 

任何幫助PLZ。

Answer 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>

您提供的樣本在這裏工作。

Answer 2

單選按鈕的設計正是出於這個功能

看一看http://www.w3schools.com/html/html_forms.asp

從鏈路兩者

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

只要它們共享相同的name屬性，你會看到預期行爲。

如果你想只允許進行檢查的一個複選框，但允許0值，併爲用戶可以不檢查的另一個取消一個值，那麼你可以做這樣的：

$("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); 
    } 
}); 

Answer 3

使用單選按鈕而不是複選框 - 這正是他們設計的目的！

$("#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" />

新增的JQuery的小片段，以 「取消選中」 的值，如果需要的話。

Answer 4

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

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

 
</head> 
 
<body> 
 
\t <form> \t \t 
 
\t \t 
 
\t <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 
 
\t <input type="checkbox" name="fruit[]" value="watermelon"> Papaya 
 
\t </form> 
 
\t 
 
</body> 
 
</html>