如何在Javascript中使用复选框禁用/启用表单元素?
我不知所措——在为这个问题绞尽脑汁数小时之后,是时候把这个问题抛到这里了 我试图让一个复选框执行一些javascript代码,当选中时,启用一些表单元素,当取消选中时,再次禁用这些元素 以下是我拥有的javascript:如何在Javascript中使用复选框禁用/启用表单元素?,javascript,Javascript,我不知所措——在为这个问题绞尽脑汁数小时之后,是时候把这个问题抛到这里了 我试图让一个复选框执行一些javascript代码,当选中时,启用一些表单元素,当取消选中时,再次禁用这些元素 以下是我拥有的javascript: function houseclean() { if (document.orderform.cleaning.checked == true) { document.orderform.rooms.disabled = false; document.order
function houseclean()
{
if (document.orderform.cleaning.checked == true)
{
document.orderform.rooms.disabled = false;
document.orderform.datetime.disabled = false;
document.orderform.howoften.disabled = false;
}
else
{
document.orderform.rooms.disabled = true;
document.orderform.datetime.disabled = true;
document.orderform.howoften.disabled = true;
}
}
这是我的HTML代码:
<form id="orderform" style="margin-left: 6cm">
<input type="checkbox" name="cleaning" value="yes" onclick="houseclean()"/> Home cleaning <br />
Service: <select name="rooms" id="rooms" disabled >
<option value="1bedroom">One Bedroom Apt</option>
<option value="2bedroom">Two Bedroom Apt</option>
<option value="3bedroom">Three Bedroom Townhome or SF Home</option>
<option value="4bedroom">Four Bedroom Home</option>
<option value="5bedroom">Five Bedroom Home</option>
<option value="6bedroom">Six Bedroom Home</option>
</select> <br />
Date / Time: <input type="text" name="datetime" disabled /><br />
How often would you like a cleaning?: <select name="howoften" disabled>
<option value="once">One Time Only</option>
<option value="2bedroom">Every Week</option>
<option value="3bedroom">Every Other Week</option>
<option value="4bedroom">Once a Month</option>
</select> <br />
</form>
家庭清洁
服务:
一居室公寓
两居室公寓
三居室联排别墅或SF住宅
四居室住宅
五居室住宅
六居室住宅
日期/时间:
您希望多久清洗一次?:
只有一次
每周
每隔一周
每月一次
此代码将实现此目的。您应该明确您的元素ID,并尽可能使用getElementById
HTML:
<form id="orderform" style="margin-left: 6cm;">
<input type="checkbox" id="cleaning" name="cleaning" value="yes" onclick="javascript:houseclean();"/> Home cleaning <br />
Service: <select name="rooms" id="rooms" disabled >
<option value="1bedroom">One Bedroom Apt</option>
<option value="2bedroom">Two Bedroom Apt</option>
<option value="3bedroom">Three Bedroom Townhome or SF Home</option>
<option value="4bedroom">Four Bedroom Home</option>
<option value="5bedroom">Five Bedroom Home</option>
<option value="6bedroom">Six Bedroom Home</option>
</select> <br />
Date / Time: <input type="text" id="datetime" name="datetime" disabled /><br />
How often would you like a cleaning?: <select id="howoften" name="howoften" disabled>
<option value="once">One Time Only</option>
<option value="2bedroom">Every Week</option>
<option value="3bedroom">Every Other Week</option>
<option value="4bedroom">Once a Month</option>
</select> <br />
</form>
JSFIDLE示例:我让您的代码正常工作。我将
id
属性添加到表单元素中,并使用document.getElementById
以确保安全
JFiddle示例:不是超级健壮,而是一个动态jquery解决方案
$("#mycheckbox").click(function() {
enableFormElements("#myform", $(this).attr('checked'));
});
function enableFormElements(form, enable) {
var fields = ["checkbox","textarea","select"];
var selector = form+" input";
$.each(fields, function(i,e) { selector += ","+form+" "+e; });
$(selector).each(function(idx) {
if (enable) {
$(this).removeAttr("disabled");
$(this).removeAttr("readonly");
} else {
$(this).attr("disabled","disabled");
$(this).attr("readonly","readonly");
}
if ($(this).is("select") || $(this).is("textarea")) {
var id = $(this).attr("id");
var txt_equiv = id+"_text";
var val = $(this).find("option[value='"+$(this).val()+"']").text();
// dynamically add the span to this element...so you can switch back and forth...
if ($(this).parent().find("span").length == 0) {
$(this).parent().append("<span class='record_display_text' id='"+txt_equiv+"'>"+val+"</span>");
}
}
if ($("#"+txt_equiv).length != 0) {
if (enable) {
$("#"+id).show();
$("#"+txt_equiv).hide();
} else {
$("#"+txt_equiv).show();
$("#"+id).hide();
}
}
});
}
你可能会想改变背景颜色以匹配你的页面颜色…而“光标:默认值”是如果bootstrap twitter在禁用元素上添加了恼人的“受限”光标或其他任何东西…但无论如何,这是我今晚提出的解决方案,它对我有效。:) 请详细说明错误是什么。从这里我猜document.orderform.blah.disabled实际上不是您想要的,也许可以使用jQuery?或者你想要onclientclicked?@RabNawaz,你知道你不能用
document.ElementId.AnotherId
,对吧?这里的关键是我的代码有效,OP的代码无效。使用getElementById
的意义在于它总是有效的。如果OP不使用jQuery,您的答案将变得毫无用处。您应该提供纯JavaScript解决方案。
$("#mycheckbox").click(function() {
enableFormElements("#myform", $(this).attr('checked'));
});
function enableFormElements(form, enable) {
var fields = ["checkbox","textarea","select"];
var selector = form+" input";
$.each(fields, function(i,e) { selector += ","+form+" "+e; });
$(selector).each(function(idx) {
if (enable) {
$(this).removeAttr("disabled");
$(this).removeAttr("readonly");
} else {
$(this).attr("disabled","disabled");
$(this).attr("readonly","readonly");
}
if ($(this).is("select") || $(this).is("textarea")) {
var id = $(this).attr("id");
var txt_equiv = id+"_text";
var val = $(this).find("option[value='"+$(this).val()+"']").text();
// dynamically add the span to this element...so you can switch back and forth...
if ($(this).parent().find("span").length == 0) {
$(this).parent().append("<span class='record_display_text' id='"+txt_equiv+"'>"+val+"</span>");
}
}
if ($("#"+txt_equiv).length != 0) {
if (enable) {
$("#"+id).show();
$("#"+txt_equiv).hide();
} else {
$("#"+txt_equiv).show();
$("#"+id).hide();
}
}
});
}
input[readonly],
select[readonly],
textarea[readonly] {
cursor: default;
}
input[disabled] {
background-color:#F0F0F0;
border:none;
-moz-box-shadow: none;
-webkit-box-shadow:none;
box-shadow:none;
padding: 0;
}