Jquery - 单击复选框时取消选中所有复选框

时间:2018-03-22 10:28:00

标签: jquery

创建了一个函数,在检查复选框时它会禁用所有其他复选框,但我试图取消选中除已检查的复选框以外的所有复选框。

First if语句:如果已选中第9个复选框,则从所有其他复选框中删除checked属性,并禁用所有其他复选框。与10和11相同

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(function () {
            $("input[type='checkbox']").change(function () {
                debugger;
                if (($("input[type='checkbox']")[9]).checked) {
                    $("input[type='checkbox']").not($("input[type='checkbox']")[9]).removeAttr("checked");
                    $("input[type='checkbox']").not($("input[type='checkbox']")[9]).attr("disabled", "disabled");
                }
                else if (($("input[type='checkbox']")[10]).checked) {
                    $("input[type='checkbox']").not($("input[type='checkbox']")[10]).removeAttr("checked");
                    $("input[type='checkbox']").not($("input[type='checkbox']")[10]).attr("disabled", "disabled");
                }
                else if (($("input[type='checkbox']")[11]).checked) {
                    $("input[type='checkbox']").not($("input[type='checkbox']")[11]).removeAttr("checked");
                    $("input[type='checkbox']").not($("input[type='checkbox']")[11]).attr("disabled", "disabled");
                }
                else if (($("input[type='checkbox']")[12]).checked) {
                    $("#show").css("display", "block");
                }
                else {
                    $("input[type='checkbox']").not($("input[type='checkbox']")[9]).removeAttr("disabled");
                    $("input[type='checkbox']").not($("input[type='checkbox']")[10]).removeAttr("disabled");
                    $("input[type='checkbox']").not($("input[type='checkbox']")[11]).removeAttr("disabled");
                    $("#show").css("display", "none");
                }
            });
        });
    </script>

1 个答案:

答案 0 :(得分:1)

您需要使用.prop在复选框上设置已选中和已停用的属性:

&#13;
&#13;
var $checkboxes = $("input[type='checkbox']"); // cache for better performance

$checkboxes.change(function () {
  var $this = $(this),
      currentIndex = $checkboxes.index($this);  // get current changed checkbox's index

  if (currentIndex === 9 || currentIndex === 10 || currentIndex === 11) { // you may need to minus 1 from this as index is 0 based
    if (this.checked) {
      $checkboxes.not($this)
        .prop('checked', false)    // uncheck
        .prop('disabled', true);   // disable
    } else {
      $checkboxes.prop('disabled', false);
    }
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="0"> 0<br>
<input type="checkbox" value="1"> 1<br>
<input type="checkbox" value="2"> 2<br>
<input type="checkbox" value="3"> 3<br>
<input type="checkbox" value="4"> 4<br>
<input type="checkbox" value="5"> 5<br>
<input type="checkbox" value="6"> 6<br>
<input type="checkbox" value="7"> 7<br>
<input type="checkbox" value="8"> 8<br>
<input type="checkbox" value="9"> 9 - uncheck and disable all<br>
<input type="checkbox" value="10"> 10 - uncheck and disable all<br>
<input type="checkbox" value="11"> 11 - uncheck and disable all<br>
<input type="checkbox" value="12"> 12<br>
<input type="checkbox" value="13"> 13<br>
&#13;
&#13;
&#13;