Question

我不知所措 - 经过几个小时的抨击我的大脑，现在是时候把问题提到这里了。

我正在尝试使用一个复选框执行一些javascript代码，当选中时，会启用一些表单元素，并且在取消选中时，再次禁用这些元素。

这是我的javascript：

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>

Answer 1

这段代码可以解决问题。您应该明确说明您的元素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>

和javascript：

function houseclean()
{
if (document.getElementById('cleaning').checked == true)
  {
  document.getElementById('rooms').removeAttribute('disabled');
  document.getElementById('datetime').removeAttribute('disabled');
  document.getElementById('howoften').removeAttribute('disabled');
  }
else
  {
  document.getElementById('rooms').setAttribute('disabled','disabled');
  document.getElementById('datetime').setAttribute('disabled','disabled');
  document.getElementById('howoften').setAttribute('disabled','disabled');
  }
}

JSFiddle示例：http://jsfiddle.net/HQQ4n/10/

Answer 2

我让你的代码工作了。我将id属性添加到表单元素中，并使用document.getElementById来保证安全。

JFiddle示例：http://jsfiddle.net/vxRjw/1/

Answer 3

不是超级健壮的，而是一个动态的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();
                }
            }
        });
}

该函数基本上查找在提供的元素内找到的所有输入，选择，textareas，并禁用或启用每个。如果使用JQuery 1.9，您可能希望将它们更改为prop设置，但我发现并非所有浏览器都在使用它。（的Bleh）。在textareas或choose的情况下，它实际上创建了一个相关的span，其id与输入匹配，除了后面带有“_text”。如果您的页面上有其他可能存在冲突的ID，您可能需要对其进行编辑...但是将其置于适当的位置后，代码可以隐藏/显示文本或实际的select / textarea，具体取决于您是否要启用所有内容或者禁用。同样，没有在所有情况下进行测试，但可以随意复制和编辑...

哦，并确保所有选择或textareas都是他们父母的唯一孩子...如果必须，请在一个范围内换行，因为它会动态地在相同的父级内添加相关的跨度...所以如果选择或者textarea不包含在父级（如span，div或td或其他东西）中，然后它可能会将生成的文本跨度随机抛出。：P

然后你可以添加一些CSS来使表单元素看起来更像普通页面或标准span元素......

    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;
    }

您可能希望更改背景颜色以匹配您的页面颜色...而“游标：默认”是指如果bootstrap twitter正在添加烦人的“受限”光标或其他任何残障元素。但无论如何，这是我今晚提出的一个解决方案，它对我有用。：）

如何使用带有Javascript的复选框禁用/启用表单元素？

3 个答案: