Question

我有一些带有一些单选按钮元素的表单。一旦选择了按钮，我想禁用其中一个无线电按钮（名为＆＃39;选项1和＃39;）。这是HTML：

<h2>Option 1</h2>
<form>
  <input type="radio" name="option 1" value="A" />Value A
  <input type="radio" name="option 1" value="B" />Value B
</form>

<h2>Option 2</h2>
<form>
  <input type="radio" name="option 2" value="C" />Value C
  <input type="radio" name="option 2" value="D" />Value D
</form>

我正在使用此代码：

$(":radio").click(function() {
  var radioName = "option 1"; 
  $(":radio[name='" + radioName + "']:not(:checked)").attr("disabled", true); 
});

它有效...但是如果一个单选按钮＆＃39;选项2＆＃39;首先选择＆＃39;选项1＆＃39;单选按钮被禁用（它们应该保持启用状态，直到单击为止）。我该如何防止这种行为？

谢谢

Answer 1

您正在将事件附加到所有单选按钮，但您应将事件仅附加到将自行禁用的事件。检查我的代码段。

$('input[type="radio"][name="option 1"]').click(function() {
  var radioName = "option 1"; 
  $('input[name="' + radioName + '"]:not(:checked)').attr("disabled", true); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Option 1</h2>
<form>
  <input type="radio" name="option 1" value="A" />Value A
  <input type="radio" name="option 1" value="B" />Value B
</form>

<h2>Option 2</h2>
<form>
  <input type="radio" name="option 2" value="C" />Value C
  <input type="radio" name="option 2" value="D" />Value D
</form>

Answer 2

在你的jQuery函数中，你选择了所有的单选按钮，但你想要的只是定位名为option 1的单选按钮，所以更新代码如下：

$(":radio[name='option 1']").click(function() {
  var radioName = "option 1"; 
  $(":radio[name='" + radioName + "']:not(:checked)").attr("disabled", true); 
});

单击后禁用单选按钮

2 个答案: