1

在我的页面中，我有多种形式，当我单击单选按钮“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>
4

2 回答 2

1

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

<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')
});

示范

于 2013-02-15T11:51:07.773 回答
0

您的 HTML 存在一些问题，但我假设这只是您包含的一些示例代码，用于显示您正在尝试执行的操作。

如果您的单选元素是您要启用/禁用的表单的子元素，您可以使用该parent()功能在 DOM 中上一层，并到达表单元素。

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

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

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

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

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

.prop('disabled','');
于 2013-02-15T11:51:48.377 回答