js调查问卷多选题 选够3个 其他选项禁用 取消1个 其他选用不禁用
时间: 2024-10-18 13:18:20 浏览: 1
在JavaScript中创建一个调查问卷式的多选题,并限制用户只能选择三个选项,取消一个选项后其他选项才变为可选,你可以使用HTML、CSS和JavaScript(如jQuery或原生JavaScript)来实现。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>多选问卷</title>
<style>
.option {
display: inline-block;
margin-right: 10px;
}
#disabledOptions {
opacity: 0.5;
pointer-events: none;
}
</style>
</head>
<body>
<h2>多选问卷</h2>
<div id="question">
<label for="select1">请选择最多3个选项:</label><br/>
<input type="checkbox" name="options[]" value="1" id="select1" required disabled> 选项A<br/>
<input type="checkbox" name="options[]" value="2" id="select2" required> 选项B<br/>
<input type="checkbox" name="options[]" value="3" id="select3" required> 选项C<br/>
<input type="checkbox" name="options[]" value="4" id="select4"> 选项D (禁用)<br/>
<!-- 以下是其他可选但默认禁用的选项 -->
<div id="disabledOptions">
<input type="checkbox" name="options[]" value="5" id="select5"> 选项E<br/>
<input type="checkbox" name="options[]" value="6" id="select6"> 选项F<br/>
</div>
</div>
<button onclick="checkThree()">提交</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkThree() {
var checkboxes = $("input[name='options[]']:checked");
if (checkboxes.length > 3) {
alert("请只选择不超过3个选项!");
return;
}
checkboxes.each(function() {
$(this).nextAll('.option').not(':first').parent().css('opacity', '1').attr('disabled', false);
});
// 如果有超过3个被选中的,则取消最后一个
checkboxes.last().prop('checked', false);
}
</script>
</body>
</html>
```
在这个例子中,我们首先设置前三个选项为必填项且默认禁用。当用户点击“提交”按钮时,`checkThree`函数会检查是否选择了超过三个选项,如果超过则提示用户并保持禁用状态;如果没有超过,会选择的选项后面的其他选项将变得可见并且可以被选择。
阅读全文