Question

我正在隐藏/显示基于复选框状态的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']中“hidden”div中的所有输入字段。

但我怎么能这样做？

Answer 1

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

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

Answer 2

您可以直接在元素上设置.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的控件不能成功”。

从提交中排除隐藏的表单字段

2 个答案: