Question

我有一个HTML表格。想象一下这样的事情（我将使用伪代码）：

<table>
 <tr>
  <td>Checkbox</td>
  <td>Select</td>
  <td>Select</td>
 </tr>
 <tr>
  <td>Checkbox</td>
  <td>Select</td>
  <td>Select</td>
 </tr>
</table>

事情是所有选择都被禁用。当我选中复选框时，它应该启用所有选择OF THAT ROW。之前，我在div中有这个代码，并且可以使用兄弟姐妹来查找选择。这是我使用的代码：

    $('[name*=chkd]').click(function(){
        if ($(this).is(':checked')) {
            $(this).siblings('select').removeAttr('disabled');
        }
        else{
            $(this).siblings('select').attr('disabled', 'disabled');
        }
    });

但是现在，因为它们都是内部标签，所以我无法使用该代码。任何人都可以了解我可以做些什么来改变这些代码，以便它可以与表一起使用？

Answer 1

他们不再是兄弟姐妹了。因此，您必须遍历每个父母的共同父母。

$('[name*=chkd]').click(function(){
        if ($(this).is(':checked')) {
            $(this).closest('tr').find('select').removeAttr('disabled');
        }
        else{
            $(this).closest('tr').find('select').attr('disabled', 'disabled');
        }
    });

Answer 2

假设您的标记看起来像这样：

<table>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <select disabled>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
    <td>
      <select disabled>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <select disabled>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
    <td>
      <select disabled>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
  </tr>
</table>

此代码将为您提供预期结果：

$(function() {
    // When a checkbox is clicked.
    $("input[type=checkbox]").on("click", function () {
        // Is it checked?
        var checked = $(this).is(":checked");

        // Look for the selects in the row and toggle their disabled property.
        $(this).closest("tr").find("select").prop("disabled", !checked);
  });
});

Demo

参考文献：

.prop() | jQuery API

.closest() | jQuery API

.find() | jQuery API

Answer 3

let Source = Excel.CurrentWorkbook(){[Name="Table1"]}[Content], #"Changed Type" = Table.TransformColumnTypes(Source,{{"G", type text}, {"H", type any}, {"I", Int64.Type}}), #"Removed Columns" = Table.RemoveColumns(#"Changed Type",{"H"}), #"Added Custom" = Table.AddColumn(#"Removed Columns", "H", each if [G] <> null and [I] <> null then [I] else if [G] <> null then "" else null), #"Filled Down" = Table.FillDown(#"Added Custom",{"H"}), #"Replaced Value" = Table.ReplaceValue(#"Filled Down","",null,Replacer.ReplaceValue,{"H"}), #"Reordered Columns" = Table.ReorderColumns(#"Replaced Value",{"G", "H", "I"}) in #"Reordered Columns"不再是input的兄弟，所以您需要找到父母的兄弟姐妹，然后在这些元素中找到select。

select

 $('[name*=chkd]').click(function() {
   var $siblings = $(this).parent().siblings().find('select');
   if ($(this).is(':checked')) {
     $siblings.removeAttr('disabled');
   } else {
     $siblings.attr('disabled', 'disabled');
   }
 });

Answer 4

您可以使用find搜索选定元素，并将disabled属性分配给复选框值：

$('.myTable').on('change', ':checkbox', function() {
  var $controls = $(this).closest('tr').find('select').prop('disabled', this.checked);
  if (this.checked) {
    $controls.val(0)
  }
}).find(':checkbox').change();

您可以查看this fiddle

选中该行的复选标记时，在表中启用元素

4 个答案: