单击后禁用单选按钮

Question

我有一些表单，其中包含一些单选按钮元素。我希望在选择一个按钮后，只禁用其中一个单选按钮（名称为“选项1”）。以下是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); 
});

它能够正常工作...但是如果先选择单选按钮“选项2”，那么“选项1”单选按钮会被禁用（它们应该保持启用状态直到被点击）。我该如何防止这种行为？

谢谢。

- neek05

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>

- muecas

Answer 2

在您的 jQuery 函数中，您选择了所有单选按钮，但您想要的是仅针对名为 option 1 的单选按钮进行操作，因此请将代码更新为以下内容：

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

- Laura