Question

在我的页面中，我有多种形式，当我点击单选按钮“disabled_radio”时，我会将单选按钮“radio_enabled_disabled”变为禁用，但是对于相对表单ID。

<td>
<form method="post" name="form1" id="form1" action="send.php">
   <div id="choice">
   <input type="radio" name="enabled_radio" value="yes" />YES
   <input type="radio" name="disabled_radio" value="no" />NO
   </div>
   <div id="mydiv">
   <input type="radio" name="radio_enabled_disabled" />
   </div>
</form>
</td>
<td>
<form method="post" name="form2" id="form2" action="send.php">
   <div id="choice">
   <input type="radio" name="enabled_radio" value="yes" />YES
   <input type="radio" name="disabled_radio" value="no" />NO
   </div>
   <div id="mydiv">
   <input type="radio" name="radio_enabled_disabled" />
   </div>
</form>
</td>

Answer 1

首先，您需要一个固定的HTML，没有重复使用的ID和用于对它们进行分组的无线电名称：

<form method="post" name="form1" id="form1" action="send.php">
   <input type="radio" name="enable_radio" value="yes">YES
   <input type="radio" name="enable_radio" value="no">NO
   <input type="radio" name="radio_enabled_disabled">
</form>
<form method="post" name="form2" id="form2" action="send.php">
   <input type="radio" name="enable_radio" value="yes">YES
   <input type="radio" name="enable_radio" value="no">NO
   <input type="radio" name="radio_enabled_disabled">
</form>
<form method="post" name="form3" id="form3" action="send.php">
   <input type="radio" name="enable_radio" value="yes">YES
   <input type="radio" name="enable_radio" value="no">NO
   <input type="radio" name="radio_enabled_disabled">
</form>

然后你可以这样做：

$('[name=enable_radio]').change(function(){
    $(this).parent().find('[name="radio_enabled_disabled"]')
       .prop('disabled',this.value=='yes')
});

Demonstration

Answer 2

您的HTML存在一些问题，但我会假设这只是您提供的一些示例代码，用于显示您要执行的操作。

如果你的无线电元素是你要启用/禁用的表单的子元素，你可以使用parent() function在DOM中升级一级，然后到达表单元素。

$('input.disabled_radio').on('click',function(){
  $(this.parent().find('input[name="radio_enabled_disabled"]').prop('disabled','disabled');
});

此代码将找到相对父表单元素，并为其中包含的每个输入元素设置disabled属性。

就我个人而言，我喜欢尽可能地使用我的代码。我发现这大大提高了可读性。所以我建议使用jQuery的closest() function而不是parent()。 closest()函数要求您指定要查找的父元素的类型。所以代码看起来像这样 -

$('input.disabled_radio').on('click',function(){
  $(this.closest('form').find('input[name="radio_enabled_disabled"]').prop('disabled','disabled');
});

之后，要重新启用单选按钮，您需要删除该禁用的属性。为此你可以使用它 -

.prop('disabled','');

jquery启用/禁用相对于表单的无线电

2 个答案: