根据用户选择禁用单选按钮 [英] Disabling radio button based on user selection

问题描述

我有2组单选按钮，每个按钮有4个选项.这两个类别中的这四个选项相同.我不想允许在两个类别中都可以进行相同的选择.

I have 2 sets of radio buttons with 4 options each. These 4 options are the same in both categories. I do not want to allow same selection to be possible in both categories.

例如-如果在第一个类别中选择了选项1，则用户现在只能从第二个类别中的选项2/3/4中进行选择.

For example - if option 1 is chosen is in the first category, the user can now only select from option 2/3/4 in the second category.

这个问题曾经被问过，但是对于我的情况似乎没有任何作用.这是我的代码-

This question has been asked before, but nothing seems to be working for my case. Here is my code -

$("input[type=radio]").click(function() {
  
  $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled");
  $(this).removeAttr("disabled");
});

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ccc;
  padding: 10px;
}

th:empty {
  border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Most Supportive</th>
    <th>Reddit comment</th>
    <th>Most Offensive</th>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1a" data-min-check="1" required value="a" data-col="1"></td>
    <td>Comment 1</td>
    <td><input type="radio" name="Least1" id="Least-1a" data-min-check="1" required value="a" data-col="1"></td>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1b" data-min-check="1" required value="b" data-col="2"></td>
    <td>Comment 2</td>
    <td><input type="radio" name="Least1" id="Least-1b" data-min-check="1" required value="b" data-col="2"></td>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1c" data-min-check="1" required value="c" data-col="3"></td>
    <td>Comment 3</td>
    <td><input type="radio" name="Least1" id="Least-1c" data-min-check="1" required value="c" data-col="3"></td>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1d" data-min-check="1" required value="d" data-col="4"></td>
    <td>Comment 4</td>
    <td><input type="radio" name="Least1" id="Least-1d" data-min-check="1" required value="d" data-col="4"></td>
  </tr>
</table>

推荐答案

首先启用所有单选按钮，然后禁用要禁用的单选按钮:

First enable all radio buttons, then disable the one you would like to disable:

$("input[type=radio]").click(function() {
  console.log("here")
  $("input[type=radio]").removeAttr("disabled");
  $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled");
  $(this).removeAttr("disabled");
});

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ccc;
  padding: 10px;
}

th:empty {
  border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Most Supportive</th>
    <th>Reddit comment</th>
    <th>Most Offensive</th>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1a" data-min-check="1" required value="a" data-col="1"></td>
    <td>Comment 1</td>
    <td><input type="radio" name="Least1" id="Least-1a" data-min-check="1" required value="a" data-col="1"></td>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1b" data-min-check="1" required value="b" data-col="2"></td>
    <td>Comment 2</td>
    <td><input type="radio" name="Least1" id="Least-1b" data-min-check="1" required value="b" data-col="2"></td>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1c" data-min-check="1" required value="c" data-col="3"></td>
    <td>Comment 3</td>
    <td><input type="radio" name="Least1" id="Least-1c" data-min-check="1" required value="c" data-col="3"></td>
  </tr>
  <tr>
    <td><input type="radio" name="Most1" id="Most-1d" data-min-check="1" required value="d" data-col="4"></td>
    <td>Comment 4</td>
    <td><input type="radio" name="Least1" id="Least-1d" data-min-check="1" required value="d" data-col="4"></td>
  </tr>
</table>

这篇关于根据用户选择禁用单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！