检查所有空间后复选框其他复选框要取消选中和禁用答案

【问题标题】：When check all space checkbox other checkboxes to be unchecked and disabled检查所有空间后复选框其他复选框要取消选中和禁用
【发布时间】：2017-07-22 13:31:37
【问题描述】：

我有一组表示房屋空间的复选框，最后一个复选框用于房屋所有空间。当我选中“所有空间”复选框时，我想禁用和取消选中其他复选框。它的javascript代码是什么？

 <html>
 <label  class="input-group-addon">
                          <input type="checkbox" value="1" id="rndr-lobby" 
 name="rndr-int-options"  />
                          Lobby </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.4" id="rndr-room" 
 name="rndr-int-options" />
                         Room </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.5" id="rndr-living" name="rndr-int-options" />
                          Living </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.6" id="rndr-wc" name="rndr-int-options" />
                         WC </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-kitchen" name="rndr-int-options" />
                          Kitchen </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-office" name="rndr-int-options" />
                          Office </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-saloon" name="rndr-int-options" />
                          Saloon  </label>
                        <label  class="input-group-addon">
                          <input type="checkbox" value="1.3" id="rndr-all" name="rndr-int-options" onchange="AllCk();"/>
                         All sapce</label>
 </html>
    <script>

document.getElementById('rndr-all').onchange = function() {AllCk();};

var  AllCk = function () {
    var RndrLob = document.getElementById("rndr-lobby"),
        RndrRoo = document.getElementById("rndr-room"),
        RndrLiv = document.getElementById("rndr-living"),
        RndrWc =  document.getElementById("rndr-wc"),
        RndrKit = document.getElementById("rndr-kitchen"),
        RndrOff = document.getElementById("rndr-office"),
        RndrSal = document.getElementById("rndr-saloon"),
        RndrAll = document.getElementById('rnder-all').checked;

    if (RndrAll === true) {

        RndrLob.disabled = true; RndrLob.checked = false;
        RndrRoo.disabled = true; RndrRoo.checked = false;
        RndrLiv.disabled = true; RndrLiv.checked = false;
        RndrWc.disabled  = true; RndrWc.checked  = false;
        RndrKit.disabled = true; RndrKit.checked = false;
        RndrOff.disabled = true; RndrOff.checked = false;
        RndrSal.disabled = true; RndrSal.checked = false;
        RndrAll.disabled = true; RndrAll.checked = false;

    }


};
    </script>

【问题讨论】：

你在哪里尝试过？

标签： javascript checkbox disabled-input unchecked

【解决方案1】：

   function AllCk() {
        if (document.querySelector('#rndr-all').checked) {
        var inputs = document.getElementsByTagName("input");
          for (var i = 0; i < inputs.length; i++) {
             if (inputs[i].type == "checkbox") {
            if (inputs[i].id != "rndr-all") {
                inputs[i].checked = false;
                inputs[i].disabled = true;
            }
        }
     }
    } else {
     var inputs = document.getElementsByTagName("input");
     for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "checkbox") {

            if (inputs[i].id != "rndr-all") {
                inputs[i].disabled = false;
            }
        }
     }
    }

}

// 通过 Jquery，将其放入您的 AllCk() 函数中

 $("input[id='rndr-all']").is(":checked") ? 
                       $("input[name='rndr-int-options']").not("#rndr-all").prop('checked', false).prop('disabled', true) :
                       $("input[name='rndr-int-options']").not("#rndr-all").prop('disabled', false);

希望对你有帮助！

【讨论】：

它有效。我可以请你给我看一下这段代码的同一个 jquery 版本吗？

【解决方案2】：

假设 All sapce 复选框是该系列中的最后一个复选框，您的 AllCk() 函数应该是这样的：

function AllCk(){
    var spaces = document.getElementsByName("rndr-int-options");
    for (var i = 0; i < spaces.length - 1; i++) {
        if(spaces[i].checked)
            spaces[i].checked = false;
    }
}

【讨论】：