Javascript 选中后禁用复选框

我有一个复选框列表，每个复选框都与表中的一行相关。每一行属于一个客户机。我已经使用客户机名称作为复选框的类。我只需要在勾选第一个复选框后启用共享同一类的复选框

<input class="Alexander David" type="checkbox" value="Domain-9" name="bill[]" id="bill[]" onchange="check();">
<input class="Alexander David" type="checkbox" value="Domain-10" name="bill[]" id="bill[]" onchange="check();">
<input class="Alexander David" type="checkbox" value="Domain-11" name="bill[]" id="bill[]" onchange="check();">
<input class="John Doe" type="checkbox" value="Domain-12" name="bill[]" id="bill[]" onchange="check();">

---

试试这个：

禁用

是

属性

而不是

属性

。因此，请使用

prop

而不是

attr

<script>
function check(){
$("[name='bill']").on("change", function() {
if ($("[name='bill']").attr('class') !== $(this).className()) {
$("[name='bill']").prop('disabled', true); 
} else {
$("[name='bill']").prop('disabled', false); 
}
});
}
</script>

函数检查（）{
$（“[name='bill']”）。在（“change”，function（）上{
if（$（“[name='bill']”）.attr（'class'）！==$（this.className（））{
$（“[name='bill']”）.prop（'disabled'，true）；
}否则{
$（“[name='bill']”）.prop（'disabled'，false）；
}
});
}

嘿，你可以试试我的代码： 我对您的代码进行了一些更改，它将帮助您：

<input class="bill" client="Alexander David" value="Domain-9" name="bill[]" type="checkbox">
<input client="Alexander David" value="Domain-10" name="bill[]" class="bill" type="checkbox">
<input client="Alexander David" value="Domain-11" name="bill[]" class="bill" type="checkbox">
<input client="John Doe" value="Domain-12" name="bill[]" class="bill" type="checkbox">
<script>    
$(document).ready(function(){
    $('.bill').change(function(){
      var client = $(this).attr('client');
      if($(this).is(':checked'))
      {
        $('input[client='+client+']').attr('disabled', 'disabled');
        $(this).removeAttr('disabled');
      }
      else
       $('input[client='+client+']').removeAttr('disabled');
    });
});
<script>

$（文档）.ready（函数（）{
$（'.bill'）.change（函数（）{
var client=$（this.attr（'client'）；
如果（$（this）.is（':checked'））
{
$（'input[client='+client+']'）。attr（'disabled'，'disabled'）；
$（this.removeAttr（'disabled'）；
}
其他的
$（'input[client='+client+']'）。removeAttr（'disabled'）；
});
});

使用类名可能会有问题（因为有空格）。考虑使用<代码>数据< /代码>属性。< /P> 在本例中，我们切换所有匹配输入的

disabled

属性：

$（函数（）{
$（“输入[type=checkbox]”）。在（“更改”，函数（）上{
变量$this=$（this），
thisIdent=$this.data（“ident”）；
$（“[data ident='”+thisIdent+“]”）.not（$this.prop（“disabled”），$this.is（“：checked”）；
});
});

试试这个：


$（'input[name*=bill]'）。更改（函数（）{
$t=$（此项）；
var$th=$（this.attr（'class'）；
如果（$（this）.is（':checked'））{
$（'input[name*=bill]'）。每个（函数（）{
if（$（this.attr（'class'）！=$th）{
$（this）.not（$t）.prop（'disabled'，true）；
}
});
}否则{
$（'input[name*=bill]'）。每个（函数（）{
if（$（this.attr（'class'）！=$th）{
$（this）.not（$t）.prop（'disabled'，false）；
}
});
}
});
您正在使用
#bill
执行
onChange
功能，这意味着
bill
是一个ID。但在HTML中，它是元素的名称，复选框中没有ID。所以你的代码不起作用

当一个元素被禁用时，再次单击/更改/检查-任何事件都不会对其起作用。因此，您必须考虑一些替代方案，比如在复选框中添加一个类，使其看起来像是被禁用的

<input class="billCheck Alexander David" type="checkbox" value="Domain-9"    name="bill[]">
<input class="billCheck Alexander David" type="checkbox" value="Domain-10" name="bill[]">
<input class="billCheck Alexander David" type="checkbox" value="Domain-11" name="bill[]">
<input class="billCheck John Doe" type="checkbox" value="Domain-12" name="bill[]">


<script type="text/javascript" >
        $(".billCheck").on("click", function() {
              if ($(this).is(":checked")) {
                $(this).addClass("disabled");
              } else {
                $(this).removeClass("disabled");
              }
         });

        $('input.disabled').on('click', function(evt) {
               evt.preventDefault();
        });
    </script>

    <style>
        input.disabled {
           opacity : .50;
           filter  : alpha(opacity=50); /* IE<9 */
           cursor  : default;
        }
    </style>


$（“.billCheck”）。在（“单击”，函数（）{
如果（$（this）.is（“：checked”））{
$（此）.addClass（“已禁用”）；
}否则{
$（此）.removeClass（“已禁用”）；
}
});
$（'input.disabled'）。在（'click'，函数（evt）上{
evt.preventDefault（）；
});
输入。禁用{
不透明度：.50；
过滤器：alpha（不透明度=50）；/*IEUse
.prop
over
.attr
为什么
内联事件
以及
jQ
事件绑定？可能
如果（$（'bill'）.attr（'class'）！=$（this.className（））{
在jquery说明符中缺少一个点？
$（“#bill”）.on（'change'，函数（）
不正确，因为#是一个id选择器，并且没有带有
id=bill
if（$（'bill'）.attr（'class'）！==$（this.className（））{
选择器中缺少点
$（.bill”）.attr（“禁用”、“禁用”）
我认为，这将禁用所有元素您没有id为
#bill
的元素。也没有名为
bill
的标记，也没有任何类为
的元素。bill
。因此，首先要做的是让选择器工作，我猜，如果没有类为“bill”或id为“bill”或标记为“bill”的元素？@Pimskie即使我添加id=bill，它仍然不起作用，我在发布这个问题之前就试过了！@ndev，现在检查..我用
[name='bill']替换
“bill”
您是否更改了html？我是否已将jquery代码放入ready函数中？执行此操作并再次选中当勾选第一个框时，它将禁用框2/3并启用4，它应禁用4并保持启用2/3。勾选框4后，所有框都应禁用，但在勾选其他框之前，它将等待另一个框被勾选第一个框禁用框2/3并启用4，它应该禁用4并保持启用2/3。勾选框4后，所有框都应该禁用，但它会等到另一个框被勾选后再禁用其他框。现在，我将onchange改为onclick，再次感谢