16

我正在根据复选框的状态隐藏/显示一个 div。

<input type="checkbox" id="other" name="os[other]" value="6" onclick="toggle_form_element('os[other]')">

这是我的 Javascript 函数：

function toggle_form_element(id) {
    if ((document.getElementsByName(id)[0].checked)) {
        document.getElementById('sometimesHidden').style.display = 'block';
    } else {
        document.getElementById('sometimesHidden').style.display = 'none';
    }
}

这是“有时隐藏”的 div：

<div id="sometimesHidden">
    <input type="text" size="20" id="other_os" name="other_os">
</div>

现在我还想使用我的 toggle_form_element 函数从 $_POST['array'] 中排除“隐藏”div 中的所有输入字段。

但是我该怎么做呢？

4

2 回答 2

21

您可以将禁用属性添加到您不想提交的任何字段。

function toggle_form_element(id) {
    if ((document.getElementsByName(id)[0].checked)) {
        document.getElementById('sometimesHidden').setAttribute("disabled", "disabled");
    } else {
        document.getElementById('sometimesHidden').removeAttribute("disabled");
    }
}

对于 jQuery 解决方案：

// Disables all input, select & textarea tags within the .sometimesHidden div
if(checked) {
  $("input, select, textarea", $(".sometimesHidden")).attr("disabled", "disabled");
}
else {
  $("input, select, textarea", $(".sometimesHidden")).removeAttr("disabled");
}
于 2013-05-29T08:22:41.053 回答
5

您可以直接.disabled在元素上设置属性：

function toggle_form_element(name) {
    var state = document.getElementsByName(name)[0].checked;
    document.getElementById('sometimesHidden').disabled = state;
}

修改元素的属性几乎总是比修改属性更好，而且布尔属性的语义也更清晰。

请注意，虽然 MDN 建议在隐藏字段上忽略此属性：

禁用

此布尔属性指示表单控件不可用于交互。特别是，click 事件不会在禁用的控件上调度。此外，禁用控件的值不会与表单一起提交。

如果 type 属性的值是隐藏的，则忽略此属性。

Chrome 27 中的测试表明 Chrome确实尊重该disabled属性并阻止提交hidden字段的表单值。

此外，W3C规范没有做出这样的区分。它只是说“disabled无法成功的控制”。

于 2013-05-29T08:37:04.697 回答