检查数组中的另一个复选框后如何禁用复选框

Posted 2023-05-09

【中文标题】检查数组中的另一个复选框后如何禁用复选框

【英文标题】：How to disable Checkbox after checking another checkbox in array

【发布时间】：2017-03-31 00:39:38

【问题描述】：

勾选name="check_yes[]"复选框后如何禁用name="check_no[]"复选框？

<tr>
  <td colspan="" >
    <center>
      <input type="checkbox" name="check_yes[]" value="yes">
    </center>
  </td>
  <td colspan="" >
    <center>
      <input type="checkbox" name="check_no[]" value="no">
    </center>
  </td>
</tr>

【问题讨论】：

欢迎来到 Stack Overflow！请阅读How to Ask。关键词：“搜索和研究”和“解释......任何阻碍你自己解决的困难”。

【参考方案1】：

您可以使用closest() 和find() 的组合来获取相邻子复选框，然后使用prop() 禁用它，如下所示：

$('table :checkbox').change(function() 
  $(this).closest('tr').find(':checkbox').not(this).prop('disabled', true);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td colspan="" >
      <center>
        <input type="checkbox" name="check_yes[]" value="yes">
      </center>
    </td>
    <td colspan="" >
      <center>
        <input type="checkbox" name="check_no[]" value="no">
      </center>
    </td>
  </tr>
</table>

【讨论】：

只对表格的第一行有效，后面的行呢？

【参考方案2】：

$("table [name='check_yes[]']").change(function() 
  if($(this).is(":checked")) 
      $("[name='check_no[]']").prop('disabled', true);
  
);

这会侦听任何 check_yes[] 检查并禁用页面上的所有其他 check_no[]（如果已检查）

【参考方案3】：

function enab1() 
document.getElementById("check_no").disabled = true;

function enab2() 
document.getElementById("check_yes").disabled = true;

在您的 html 代码中

<input type="checkbox" name="check_yes[]" value="yes" onclick="enab1()">
<input type="checkbox" name="check_no[]" value="yes" onclick="enab2()">

希望这会奏效