Question

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

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

function check(){
    $("#bill").on("change", function() {
        if ($('#bill').attr('class') !== $(this).attr("class")) {
            $(".bill").attr("class").prop("disabled", false);
        } else {
            $("#bill").prop("disabled", true);
        }
    });
}

Answer 1

试试这个：

＆＃13;

docker volume

＆＃13;

 $('input[name*=bill]').change(function() {
   $t = $(this);
   var $th = $(this).attr('class');
   if ($(this).is(':checked')) {
     $('input[name*=bill]').each(function() {
       if ($(this).attr('class') != $th) {
         $(this).not($t).prop('disabled', true);
       }
     });
   } else {
     $('input[name*=bill]').each(function() {
       if ($(this).attr('class') != $th) {
         $(this).not($t).prop('disabled', false);
       }
     });
   }
 });

＆＃13;

Answer 2

试试这个：

disabled是property而不是attribute。所以请使用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>

Answer 3

嘿，你可以尝试我的代码：我对你的代码做了一些改动，它会帮助你：

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

Answer 4

使用classNames可能会有问题（因为空格）。请考虑使用data属性。

在此示例中，我们切换所有匹配输入的disabled属性：

＆＃13;

$(function(){
  
  $("input[type=checkbox]").on("change",function(){
      var $this = $(this),
          thisIdent = $this.data("ident");

      $("[data-ident='"+thisIdent+"']").not($this).prop("disabled",$this.is(":checked"));

  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-ident="Alexander David" type="checkbox" value="Domain-9"    name="bill[]">
<input data-ident="Alexander David" type="checkbox" value="Domain-10" name="bill[]">
<input data-ident="Alexander David" type="checkbox" value="Domain-11" name="bill[]">
<input data-ident="John Doe" type="checkbox" value="Domain-12" name="bill[]">

＆＃13;

Answer 5

您正在使用onChange执行#bill功能，这意味着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>

我认为这符合您的要求。

选中后禁用复选框

5 个答案: