我有 2 组单选按钮，每组有 4 个选项。这 4 个选项在两个类别中都是相同的。我不想允许在两个类别中进行相同的选择。
例如，如果在第一类别中选择选项 1，则用户现在只能从第二类别中的选项 2/3/4 中进行选择。
这个问题之前已经被问过，但似乎没有什么适合我的情况。这是我的代码 -
$("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>
首先启用所有单选按钮，然后禁用您想要禁用的单选按钮：
$("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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
