1

我不知所措——在这个问题上绞尽脑汁好几个小时之后，是时候在这里提出这个问题了。

我试图让一个复选框执行一些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>
4

3 回答 3

3

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

于 2012-07-20T18:03:59.890 回答
1

我让你的代码工作了。我将id属性添加到表单元素中，并且曾经document.getElementById是安全的。

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

于 2012-07-20T18:04:57.550 回答
-1

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

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

哦，并确保所有选择或 textarea 都是其父级的唯一子项...如果必须的话，请包装在一个跨度中，因为它会在同一个父级中动态添加相关跨度...所以如果选择或 textarea 不是t 包裹在父级中（如 span、div 或 td 或其他东西），那么它可能会将生成的文本 span 随机扔到某个地方。:P

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

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

您可能想要更改背景颜色以匹配您的页面颜色......并且“光标：默认”一个是如果引导推特正在添加烦人的“受限”光标或任何它超过禁用元素......但无论如何，这是我今晚想出的解决方案，它对我有用。:)

于 2013-04-19T05:09:10.370 回答