Question

如果选择了一个复选框，我想要所有其他复选框。据我所知，代码应该正常工作（没有控制台错误）。我做错了什么？

作为一个额外的复杂性，同一个事件监听器可以勾选其他复选框;理想情况下，还应禁用包含任何这些已选中复选框的行。

＆＃13;

(".chkbox").on('change', function() {

  var locked = false;
  // var for current row
  var row = $(this).closest('tr').index();

  var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');

  $(this).on('click', function toggleLock(e) {
    e.preventDefault();

    // Make locked true if it was false, or vice-versa
    locked = !locked;

    // And apply that value to the 'disabled' attribute of the checkboxes
    $checkboxes.attr('disabled', locked);
  });
});

＆＃13;

<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

＆＃13;

Answer 1

在这种情况下，您可以使用.closest().siblings().find().prop()方法。另一个建议是使用群组无线电：

$(".chkbox").on('change', function() {
    $(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});

这里this.checked返回布尔值。如果选中true并取消选中，则false。

在我看来，问题是您编写代码的方式告诉我们在当前单击的复选框上绑定click事件。

＆＃13;

    $(".chkbox").on('change', function() {
        $(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

＆＃13;

Answer 2

这应该有效：

$(".chkbox").click(function(){
    var currentObj = $(this);
    $(this)
        .closest("tr")
        .find(".chkbox").attr("disabled","disabled");
    $(currentObj).removeAttr("disabled");
});

fiddle

Answer 3

在此演示中，您还可以取消选中该操作并启用连续的每个复选框

工作演示：http://jsfiddle.net/darxide/vpvaseL0/

$('body').on('change' , 'tr input' , function () {

var count_checked = 0;

$(this).parent().parent().find('input:checked').each(function() {
    count_checked++
})

if(count_checked > 0){
    $(this).parent().parent().find('input').each(function () {
        $(this).prop('disabled' , true)
    })
    $(this).removeAttr('disabled')
} else {
    $(this).parent().parent().find("input").removeAttr('disabled')
}
})

禁用表格行中的所有其他复选框

3 个答案: