Question

所以我有多行复选框，如下图所示

我想在使用jquery检查同一行中最左边的复选框时禁用同一行中的添加，编辑和删除复选框，我尝试使用此处solution中的解决方案，但仅此解决方案为一组checbox工作，我会有很多复选框组，我更喜欢在这种情况下使用循环语句，但我不能提出任何解决方案。

这是我的HTML代码：

  <div class="row">
  <div class="col-sm-5"><input type="checkbox" name="aauth100" value="auth100" id="auth100" onclick ="togAuth1()">New Member + Kit Purchase</input></div>
  <div class="col-sm-2"><input type="checkbox" name="aaddAuth100" value="addAuth100" id="addAuth100">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="aeditAuth100" value="editAuth100" id="editAuth100">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="adelAuth100" value="delAuth100" id="delAuth100">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth101" value="auth101" id="auth101">New Member Registration</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth101" value="addAuth101" id="addAuth101">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth101" value="editAuth101" id="editAuth101">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth101" value="delAuth101" id="delAuth101">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth102" value="auth102" id="auth102">Member Data Maintenance</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth102" value="addAuth102" id="addAuth102">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth102" value="editAuth102" id="editAuth102">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth102" value="delAuth102" id="delAuth102">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth103" value="auth103" id="auth103">Member Registration Listing</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth103" value="addAuth103" id="addAuth103">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth103" value="editAuth103" id="editAuth103">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth103" value="delAuth103" id="delAuth103">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth104" value="auth104" id="auth104">Geneology Listing</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth104" value="addAuth104" id="addAuth104">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth104" value="editAuth104" id="editAuth104">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth104" value="delAuth104" id="delAuth104">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth105" value="auth105" id="auth105">Member Rank Report</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth105" value="addAuth105" id="addAuth105">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth105" value="editAuth105" id="editAuth105">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth105" value="delAuth105" id="delAuth105">Delete</input></div>
</div>

Answer 1

您可以为复选框指定一些课程。然后以这种方式使用jquery的.each（）方法。

$(".someclass").each(function(){

            if($(this).is(':checked'))
            {
               // Disable other checkbox in row
            }
            else
            {
                //don't disable checkbox
            }
        })

这将循环显示指定类的所有复选框，您可以轻松地将左行的复选框与类分开。虽然您必须找到一种方法，但如何在同一行的右侧定位其他复选框。

Answer 2

您可以这样做的一种方法是使用每一行。然后从那里选择第一个div并获取它的输入。这可以用于更改事件，然后您可以禁用除第一个复选框之外的所有事件：

$('.row').each(function(){
  var self = this;
  $(this).find('div:first input').change(function(){
     // disables all but the first input in the div rows
     if(this.checked) $(self).find('div:gt(0) input').attr("disabled", true);
     else $(self).find('div:gt(0) input').attr("disabled", false);
  });
});

Demo

Answer 3

这一行代码在变更事件中起作用：

$('.col-sm-5').on('change', function(){
    $(this).nextAll('.col-sm-2').children('input').prop('disabled',
         $(this).children('input').prop('checked'));
});

我会把它分解：

$('.col-sm-5').on('change', ...

每当具有col-sm-5类（或其子代之一）的元素发生变化时......

$(this).nextAll('.col-sm-2') ...

获取this的所有兄弟姐妹（已更改的元素），其中包含col-sm-2类...

.children('input') ...

获取上述内容的输入元素...

.prop('disabled', ...

disabled属性将设置为true或false ...

$(this).children('input') ...

获取包含在刚刚更改的类col-sm-5的div中的输入框...

.prop('checked') ...

查明是否已选中。所以，

$(this).children('input').prop('checked')

评估为true或false，我们将其插入到此：

.prop('disabled', [true or false])

因此，如果选中第一个复选框，则会禁用接下来的三个复选框，如果不复制，则不会复制。

我是否可以根据是否选中多个复选框来设置启用或禁用复选框？

3 个答案: