javascript - 通过 jquery html 复选框之间的交互

Question

我有一个包含很多列的 HTML 表格，但前两列是"is"和“否”列。默认情况下，"is"列已选中，“否”列未选中。我想要的是，如果我取消选中"is"列，那么“否”列将被选中，并且所有其他列将被禁用。如果我再次单击/选中"is"列，则“否”列将被取消选中，所有其他列将再次启用。

一切工作正常，但问题是当我第二次单击"is"框时，它应该再次返回“已选中”，但事实并非如此。这是 My Code 的示例.

$('tr td input[type="checkbox"].yes').click(function() {
  $(this).closest('tr').find(":input:not(.yes, .no)").prop('disabled', !this.checked);
  $(this).closest('tr').find(":input(.no)").prop('checked', !this.checked);
});

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 2px;
}

table,
th,
td {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Yes</th>
    <th>No</th>
    <th>Text</th>
    <th>Select</th>
    <th>textinput</th>
    <th>Select 2</th>
  </tr>
  <tr>
    <td>
      <input class="yes" type="checkbox" checked/>
    </td>
    <td>
      <input class="no" type="checkbox" />
    </td>
    <td>
      <input type="text" value="1111" />
    </td>
    <td>
      <select>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
    <td>
      <input type="text" value="AAAAA" />
    </td>
    <td>
      <select>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="yes" type="checkbox" checked/>
    </td>
    <td>
      <input class="no" type="checkbox" />
    </td>
    <td>
      <input type="text" value="2222" />
    </td>
    <td>
      <select>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
    <td>
      <input type="text" value="BBBB" />
    </td>
    <td>
      <select>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="yes" type="checkbox" checked/>
    </td>
    <td>
      <input class="no" type="checkbox" />
    </td>
    <td>
      <input type="text" value="3333" />
    </td>
    <td>
      <select>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
    <td>
      <input type="text" value="CCCC" />
    </td>
    <td>
      <select>
        <option>A</option>
        <option>B</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

我发现您的代码有两个问题。

1. ...find(":input(.no)")...应该只是...find(":input.no")...
2. .attr() <强> is buggy 与 disabled="true" v/s disabled="disabled" ，使用.prop()在情况下进行真值检查。

<小时/>

$('tr td input[type="checkbox"].yes').change( function() {
   $parentTr = $(this).closest('tr');
   $parentTr.find(":input:not(.yes, .no)").prop('disabled', !this.checked);
   $parentTr.find(":input.no").prop('checked', !this.checked);
});

<强> Updated Fiddle

$('tr td input[type="checkbox"].yes').change( function() {
   $(this).closest('tr').find(":input:not(.yes, .no)").prop('disabled', !this.checked);
   $(this).closest('tr').find(":input.no").prop('checked', !this.checked);
});

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
    padding: 2px;
}

table, th, td {
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table>
  <tr>
    <th>Yes</th>
    <th>No</th>
    <th>Text</th>
    <th>Select</th>
    <th>textinput</th>
    <th>Select 2</th>
  </tr>
  <tr>
    <td><input class="yes" type="checkbox" checked/></td>
    <td><input class="no" type="checkbox"/></td>
    <td><input type="text" value="1111"/></td>
    <td><select><option>A</option><option>B</option></select></td>
    <td><input type="text" value="AAAAA"/></td>
    <td><select><option>A</option><option>B</option></select></td>
  </tr>
  <tr>
    <td><input class="yes" type="checkbox" checked/></td>
    <td><input class="no" type="checkbox"/></td>
    <td><input type="text" value="2222"/></td>
    <td><select><option>A</option><option>B</option></select></td>
    <td><input type="text" value="BBBB"/></td>
    <td><select><option>A</option><option>B</option></select></td>
  </tr>
  <tr>
    <td><input class="yes" type="checkbox" checked/></td>
    <td><input class="no" type="checkbox"/></td>
    <td><input type="text" value="3333"/></td>
    <td><select><option>A</option><option>B</option></select></td>
    <td><input type="text" value="CCCC"/></td>
    <td><select><option>A</option><option>B</option></select></td>
  </tr>
</table>

此外，还有一种更好的方式来处理 no 上的点击- <强> Fiddle