我有2组单选按钮,每个有4个选项。 这4个选项在两个类别中都是相同的。 我不想让相同的选择在两个类别中都是可能的。
例如-如果选择的选项1在第一个类别中,用户现在只能从第二个类别中的选项2/3/4中进行选择。
这个问题以前也有人问过,但似乎没有一件事对我的案子起作用。 这是我的密码-
null
$("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>
null
首先启用所有单选按钮,然后禁用要禁用的单选按钮:
null
$("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>