我想制作某种形式来为每个选项评分一个不能是相同值的值，我已经通过 2 维单选按钮完成了，下一个问题是，如果没有对所有选项进行排名，用户不得继续下一列，如果只有 1 个单选按钮由javascript文档检查更改， 所以我有这样做的想法。
$(document).on('change', '.answer1', function(){
$(document).on('change', '.answer2', function(){
$(document).on('change', '.answer3', function(){
$(document).on('change', '.answer4', function(){
$(this).closest('.cont').find('.next').removeAttr("disabled");
有时它的工作，但有时它没有，可以
$('.cont').addClass('hide');
count = $('.questions').length;
$('#question' + 1).removeClass('hide');
$(document).on('click', '.next', function() {
last = parseInt($(this).attr('id'));
nex = last + 1;
$('#question' + last).addClass('hide');
$('#question' + nex).removeClass('hide');
console.log(nex);
});
$(document).on('click', '.previous', function() {
last = parseInt($(this).attr('id'));
pre = last - 1;
$('#question' + last).addClass('hide');
$('#question' + pre).removeClass('hide');
});
$(document).on('change', '.answer1', function() {
$(document).on('change', '.answer2', function() {
$(document).on('change', '.answer3', function() {
$(document).on('change', '.answer4', function() {
$(this).closest('.cont').find('.next').removeAttr("disabled");
})
})
})
});table {
border-collapse: collapse;
}
td,
th {
border: 1px solid #ccc;
padding: 10px;
}
th:empty {
border: 0;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
var col, el;
$("input[type=radio]").click(function() {
el = $(this);
col = el.data("col");
$("input[data-col=" + col + "]").prop("checked", false);
el.prop("checked", true);
});
});
</script>
</head>
<body>
<form action="quiz6.php">
<div id='question1' class='cont'>
<table>
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>option 1</td>
<td><input type="radio" name="11>" data-col="11" value="1" class="answer1>" required></td>
<td><input type="radio" name="11>" data-col="12" value="2" class="answer2>" required></td>
<td><input type="radio" name="11>" data-col="13" value="3" class="answer3>" required></td>
<td><input type="radio" name="11>" data-col="14" value="4" class="answer4>" required></td>
</tr>
<tr>
<td>option 2</td>
<td><input type="radio" name="12>" data-col="11" value="1" class="answer1>" required></td>
<td><input type="radio" name="12>" data-col="12" value="2" class="answer2>" required></td>
<td><input type="radio" name="12>" data-col="13" value="3" class="answer3>" required></td>
<td><input type="radio" name="12>" data-col="14" value="4" class="answer4>" required></td>
</tr>
<tr>
<td>option 3</td>
<td><input type="radio" name="13>" data-col="11" value="1" class="answer1>" required></td>
<td><input type="radio" name="13>" data-col="12" value="2" class="answer2>" required></td>
<td><input type="radio" name="13>" data-col="13" value="3" class="answer3>" required></td>
<td><input type="radio" name="13>" data-col="14" value="4" class="answer4>" required></td>
</tr>
<tr>
<td>option 4</td>
<td><input type="radio" name="14>" data-col="11" value="1" class="answer1>" required></td>
<td><input type="radio" name="14>" data-col="12" value="2" class="answer2>" required></td>
<td><input type="radio" name="14>" data-col="13" value="3" class="answer3>" required></td>
<td><input type="radio" name="14>" data-col="14" value="4" class="answer4>" required></td>
</tr>
</table>
<button id='1' class='next btn btn-success' type='button' disabled>Next</button>
</body>
</html>老实说，我不知道为什么它有效/不起作用。我不知道我是否可以这样做，这是更好的主意吗？
您可以添加条件来检查选中的单选按钮总数，如下所示。
$("input[type=radio]").click(function() {
el = $(this);
col = el.data("col");
$("input[data-col=" + col + "]").prop("checked", false);
el.prop("checked", true);
if($("input[data-col]:checked").length == 4){
$("button").prop('disabled',false);
}else{
$("button").prop('disabled',true);
}
});
我希望它能帮助你。(我直接使用了按钮，这可能与页面上的按钮冲突(。