Question

目前，我已经创建了两组单选按钮。我想将单选按钮设置为启用和禁用功能，只允许用户选择两个组中的Yes单选按钮之一。

例如，用户可以一次选择Yes1或Yes2按钮。当用户点击Yes1按钮时，应禁用Yes2按钮的选择并自动选择No2按钮。

我已尝试过本网站上各种开发者发布的大部分代码，但似乎没有任何帮助。另外，我不习惯jQuery语言，我更喜欢Javascript。

我需要一些指导。

注意：我只需要为Radio Buttons做这件事。

＆＃13;

<table>
  <tr>
    <label id="group2">
    <td>Drop</td>
    <td>
	<input type="text" value="0" name="qty" id="qty2" maxlength="6" size="4" readonly="readonly"/>
	</td>
    <td><input type="radio" name="group2" value="Yes" checked="checked">Yes1</td>
    <td><input type="radio" name="group2" value="No">No1</td>
  </label>
  </tr>

  <tr>
    <label id="group3">
    <td>Power</td>
    <td>
	<input type="text" value="0" name="qty" id="qty3" maxlength="6" size="4" readonly="readonly"/>
    </td>
    <td><input type="radio" name="group3" value="Yes">Yes2</td>
    <td><input type="radio" name="group3" value="No"  checked="checked">No2</td>
  </label>
  </tr>
  </table>

＆＃13;

Answer 1

根据您的问题，我对您的目标并不十分清楚，但这里有一些示例代码可以向您展示如何处理您的问题（使用jQuery）：

$(document).ready(function() {
  // set to no by default
  $("input[name=group2]").val(["No"]);
  // set to Yes and enabled by default
  $("input[name=group3]").val(["Yes"]);
  $("input[name=group3]").prop("disabled", false);

  $("input[name=group2]").on("click", function() {
    if ($(this).val() === "Yes") {
      $("input[name=group3]").val(["No"]);
      $("input[name=group3]").attr("disabled", "disabled");
    } else {
      $("input[name=group3]").prop("disabled", false);
    }
  });
});

这是一个有效的pen

Answer 2

由于您在评论部分写道，您将在此处启用/禁用多个组，这是一些需要执行的操作的一般指导原则：

给所有影响其他按钮的单选按钮（例如，group-that-disable），并添加一个数据属性，将每个单选按钮连接到应禁用的单选按钮。例如：

<td><input type="radio" name="group2" value="Yes" checked="checked" class="group-that-disable" data-group="3">Yes1</td>

<td><input type="radio" name="group2" value="No" class="group-that-disable" data-group="3">No1</td>

为该类添加一个事件侦听器，该事件侦听器将在单选按钮的状态发生变化时触发。
最后，使用更改的单选按钮的数据属性来确定和定位需要启用/禁用的单选按钮，并根据需要进行调整。

根据群组

2 个答案: