禁用表单字段不提交数据

时间:2012-01-19 12:04:12

标签: html css forms disabled-input

是否有任何方法(使用属性标记或类似内容)来启用禁用以提交数据的表单字段?

或者,如果那是不可能的,有没有办法阻止字段使用css或任何其他属性进行编辑而不是隐藏它们?

我目前的特殊情况是应该在表单中显示的数据集的标识符(不可编辑) - 如果没有更好的解决方案我认为除了禁用的字段之外我还会使用隐藏字段保持实际值与显示它的残疾人。

6 个答案:

答案 0 :(得分:207)

答案 1 :(得分:55)

未提交具有Disabled属性的元素,或者您可以说他们的值未发布。

<input type="textbox" name="Percentage" value="100" disabled="disabled" /> 

FYI,

  1. 已禁用的控件无法获得焦点。
  2. 在标签导航中跳过已禁用的控件。
  3. 无法成功发布已禁用的控件。
  4. 您可以在案例中使用readonly属性,这样您就可以发布字段的数据。

    <input type="textbox" name="Percentage" value="100" readonly="readonly" />
    

    FYI,

    1. 只读元素获得焦点,但用户无法修改。
    2. 只读元素包含在标签导航中。
    3. 只读元素已成功发布。
    4. 注意: READONLY不适用于复选框和选择标记

      Ref from

答案 2 :(得分:11)

如上所述:READONLY不适用于<input type='checkbox'><select>...</select>

如果你有Form禁用复选框/选择并且需要提交它们,你可以使用jQuery:

$('form').submit(function(e) {
    $(':disabled').each(function(e) {
        $(this).removeAttr('disabled');
    })
});

此代码会从提交的所有元素中删除disabled属性。

答案 3 :(得分:4)

在你想要的字段上使用CSS pointer-events:none&#34;禁用&#34; (可能与灰色背景一起)允许POST操作,如:

<input type="text" class="disable">

.disable{
pointer-events:none;
background:grey;
}

参考:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

答案 4 :(得分:0)

我们还可以对以下属性使用只读-

readonly onclick ='返回false;'

这是因为如果我们仅使用只读,则单选按钮将是可编辑的。为了避免这种情况,我们可以对以上组合使用只读。它将限制编辑,并且在表单提交期间还将传递元素的值。

答案 5 :(得分:0)

将CSS或类添加到在select和text标记(例如

)中可用的input元素

style =“ pointer-events:none; background-color:#E9ECEF”