我浏览了一些网站,该网站的复选框选项为
家庭:妻子丈夫儿子女儿无。 如果有人没有选择任何选项,那么其余所有选项都将被禁用
答案 0 :(得分:0)
请使用此代码,希望对您有帮助。
谢谢
<input type="checkbox" name="check" value="father" class="group1">Father
<input type="checkbox" name="check" value="mother" class="group1">mother
<input type="checkbox" name="check" value="son & doughter" class="group1">son & doughter
<input type="checkbox" name="check" value="none" id="none" class="group1">none
$(function(){
$("#none").on("click",function(){
if (this.checked) {
$("input.group1").attr("disabled", true);
}else{
$("input.group1").attr("disabled", false);
}
});
});
答案 1 :(得分:0)
"use strict";
console.clear();
{
document.addEventListener('click', e => {
const t = e.target
if (t.nodeName.toLowerCase() == 'input' && t.type == 'checkbox' && t.dataset.trigger && t.dataset.trigger == 'none') {
Array.from(t.form[t.name]).filter(el => el != t).forEach(el => el.disabled = t.checked)
}
})
}
input:disabled + label {
color: lightgray;
}
<form id="my-form">
<input type="checkbox" id="my-form-relatives-wife" name="relatives">
<label for="my-form-relatives-wife">Wife</label>
<input type="checkbox" id="my-form-relatives-husband" name="relatives">
<label for="my-form-relatives-husband">Husband</label>
<input type="checkbox" id="my-form-relatives-son" name="relatives">
<label for="my-form-relatives-son">Son</label>
<input type="checkbox" id="my-form-relatives-daughter" name="relatives">
<label for="my-form-relatives-daughter">Daughter</label>
<input type="checkbox" id="my-form-relatives-none" name="relatives" data-trigger="none">
<label for="my-form-relatives-none">None</label>
</form>
这是向后兼容的版本
"use strict";
console.clear();
{
document.addEventListener('click', function(e) {
var t = e.target
if (t.nodeName.toLowerCase() == 'input' && t.type == 'checkbox' && t.dataset.trigger && t.dataset.trigger == 'none') {
Array.prototype.filter.call(t.form[t.name], function(el) { return el != t }).forEach(function(el) { return el.disabled = t.checked})
}
})
}
input:disabled + label {
color: lightgray;
}
<form id="my-form">
<input type="checkbox" id="my-form-relatives-wife" name="relatives">
<label for="my-form-relatives-wife">Wife</label>
<input type="checkbox" id="my-form-relatives-husband" name="relatives">
<label for="my-form-relatives-husband">Husband</label>
<input type="checkbox" id="my-form-relatives-son" name="relatives">
<label for="my-form-relatives-son">Son</label>
<input type="checkbox" id="my-form-relatives-daughter" name="relatives">
<label for="my-form-relatives-daughter">Daughter</label>
<input type="checkbox" id="my-form-relatives-none" name="relatives" data-trigger="none">
<label for="my-form-relatives-none">None</label>
</form>