如何禁用基于另一个复选框启用复选框
How to disable enable a checkbox based on another checkbox?
以下代码由 for 循环生成。
<form action="saveresponse.php" method="POST" name="mainForm">
<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="01.jpg" disabled />Special<br />
<input class="cbox_yes" type="checkbox" name="yes[]" value="02.jpg"
onclick="spenable()" /> OK
<input class="cbox_sp" type="checkbox" name="sp[]" value="02.jpg" disabled />Special<br />
etc etc upto n times...
现在,我想要的是,在页面加载时,所有 sp[] 复选框都应该被禁用,并且只有在用户选中其腐蚀性的 yes[] 复选框时才应启用。
我正在使用的Javascript代码:(只是为了检查JS是否捕获了yes[]复选框的状态?
function spenable(){
var yes = document.mainForm.yes[].value;
if (yes == true)
//alert("true");
document.mainForm.yes[].value = checked;
else
//alert("false");
document.mainForm.yes[].value = checked;
};
};
但我没有得到任何警报(既不是,也不是不是)。
那么,第二行中的yes[](方括号)不正确吗?或者我的 if/else 条件在 JS 中是错误的?
附言SO或Google上的所有问题仅涉及一个案例/对.
附言如果需要,我可以将 yes[] 更改为 yes1、yes2、yes3 等以及相应的 sp1、sp2、sp3,其中 1,2,3 是 For 循环的$i,但是我将如何在 JS?
中捕获/引用它
更新:_
流程/条件为(澄清):
最初,"特殊"复选框将被禁用,"确定"复选框将被取消选中><。然后,如果用户选中"确定",则会启用特殊。
如果用户愿意,他可以勾选 Special.
如果稍后用户改变主意并取消选中"确定",则应取消选中"特殊"并再次禁用。
简单起见,我在这里使用了jQuery。
$("input[name='yes[]']").change(function() { //When checkbox changes
var checked = $(this).attr("checked");
$(this).next().attr("disabled", !checked); //The next checkbox will enable
}); // or disable based on the
// checkbox before it
演示:http://jsfiddle.net/DerekL/Zdf9d/
纯JavaScript:http://jsfiddle.net/DerekL/Zdf9d/1/
更新
选中"特殊"复选框时,它将取消选中第一个复选框。
纯JavaScript:http://jsfiddle.net/DerekL/Zdf9d/2/
更多更新
这是演示:
纯JavaScript:http://jsfiddle.net/DerekL/Zdf9d/3/
jQuery: http://jsfiddle.net/DerekL/Zdf9d/4/
小提示:document.querySelectorAll
适用于所有现代浏览器和IE8 +,包括IE8。如果你想支持IE6,最好使用jQuery。
Javascript 中使用 yes[]
作为标识符,所以你必须使用名称作为字符串来访问该字段:
document.mainForm["yes[]"]
这不会返回单个元素,它将返回一个元素数组。使用索引访问特定元素:
document.mainForm["yes[]"][0]
复选框的值将始终为 value
属性,无论复选框是否处于选中状态。 使用 checked
属性了解它是否已选中:
function spenable() {
var yes = document.mainForm["yes[]"][0].checked;
if (yes) {
alert("true");
} else {
alert("false");
};
}
要访问单击的特定复选框,请在事件调用中发送复选框的索引:
<input class="cbox_yes" type="checkbox" name="yes[]" value="01.jpg" onclick="spenable(0);" /> OK
在函数中使用索引:
function spenable(idx) {
var yes = document.mainForm["yes[]"][idx].checked;
var sp = document.mainForm["sp[]"][idx];
sp.disabled = !yes;
}
如果你愿意使用 jQuery:
$('input[type="checkbox"]').click(function(){
var obj = $(this);
obj.next('.cbox_sp').attr({'disabled':(obj.is(':checked') ? false : 'disabled')});
});
此解决方案将为所有复选框分配一个onclick
事件处理程序,然后检查是否应禁用相应的"特殊"复选框。 它还将默认选中状态设置为 true。
工作示例:http://jsfiddle.net/6YTqC/
- 如何使用javascript函数在gridview中按行启用/禁用复选框
- 单选按钮的验证(启用)&使用Jquery Optimization从复选框中选择submit按钮
- 如何使用复选框启用多个元素
- 如何使用复选框启用选项并通过本地存储进行保存
- 复选框启用/禁用在IE中不起作用
- 如何禁用基于另一个复选框启用复选框
- 使用动态添加的复选框启用/禁用按钮
- 组合框更改复选框启用
- 复选框启用和禁用文本区域
- 如何通过单击复选框启用输入
- 复选框启用 Onload 以显示其他元素
- 为什么可以't我使用复选框启用/禁用我的文本框
- jQuery复选框启用/禁用文本输入和添加/删除默认值
- 复选框启用非活动字段
- 使用复选框启用调用拖动
- 复选框启用或禁用的Jquery代码
- 复选框启用/禁用文件上传.当未选中复选框时,记录中的文件将被删除
- 使用JS通过复选框启用文本框
- 寻找复选框启用-禁用编码技术:减少JavaScript代码的技巧
- 通过选中复选框启用多个输入