jQuery如果选中复选框，则禁用其他复选框答案

【问题标题】：jQuery if checkbox is checked diasble other checkboxjQuery如果选中复选框，则禁用其他复选框
【发布时间】：2015-12-21 10:48:32
【问题描述】：

我有 HTML 代码：

 <input type="checkbox" name="all" value="all">ALL
 <input type="checkbox" name="agent" value="agent" >Agent
 <input type="checkbox" name="company" value="company">Company
 <input type="checkbox" name="branch" value="branch">Branch

如果我选中all，other checkbox会被禁用，如果我取消选中，other checkbox会重新启用。

我试过这样做，使用下面的脚本。

$("input[name='all']").change(function() {
    if(this.checked) {
        $("input[name='agent']").prop("disabled",true);
    }
});

【问题讨论】：

标签： jquery html checkbox

【解决方案1】：

您的代码只会执行禁用部分。您应该使用 checked 值作为禁用属性来根据检查/取消检查状态切换状态：

 var subinputs = $("input[name=agent],input[name=company],input[name=branch]");
$("input[name='all']").change(function() {
   subinputs.prop("disabled",this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all">ALL
        <input type="checkbox" name="agent" value="agent" >Agent
        <input type="checkbox" name="company" value="company">Company
        <input type="checkbox" name="branch" value="branch">Branch

【讨论】：

【解决方案2】：

//I have added a id field in your first check box and add a class rest of checkboxes.
//This code is working you can use this

$(function(){
  $('#all_employee').on('click',function(){
    if($(this).is(':checked') === true){
       $('.employee').prop('disabled','disabled');
    }else{      
      $('.employee').prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all" id="all_employee" >ALL
        <input type="checkbox" name="agent" value="agent" class="employee" >Agent
        <input type="checkbox" name="company" value="company" class="employee">Company
        <input type="checkbox" name="branch" value="branch" class="employee">Branch

【讨论】：

【解决方案3】：

请检查下面的代码，还有很多其他方法，但对于您的 HTML，这是您这样做的方式

$("input[name='all']").change(function() {
    if(this.checked) {
      $(this).siblings('input:checkbox').prop("disabled",true);
    }
  else {
    $("input[type='checkbox']").removeAttr("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all">ALL
        <input type="checkbox" name="agent" value="agent" >Agent
        <input type="checkbox" name="company" value="company">Company
        <input type="checkbox" name="branch" value="branch">Branch

【讨论】：

@MilindAnantwar 检查我在下面写的也启用此功能并尝试演示，您会发现它工作正常
$("input[name='all']").removeAttr("disabled");这是从所有删除禁用属性的行--
@krishnaveni 实际上这是通用解决方案，您要添加多少个复选框，添加您不需要在 Jquery 中进行任何更改，它适用于 n 个复选框。跨度>

【解决方案4】：

添加缺少的else：

    $("input[name='all']").change(function() {
if(this.checked) {
            $("input[name='all'] input").prop("disabled",true);
}
else{
        $("input[name='all'] input").prop("disabled",false);
}});

【讨论】：

【解决方案5】：

绑定一个更改处理程序，然后取消选中所有复选框，除了选中的复选框：

$('input').on('change', function() {
$('input').not(this).prop('checked', false);   });

【讨论】：