为所有表单元素添加只读属性

Posted 2023-03-05

【中文标题】为所有表单元素添加只读属性

【英文标题】：Adding readonly attribute to all form elements

【发布时间】：2011-04-30 22:41:51

【问题描述】：

我正在使用 jQuery ，但似乎无法弄清楚如何做到这一点。

这是我正在尝试的：

$('#form1').each( function()  $(this).attr('readonly', true); );

我有一个使用标签/输入来显示表单元素的简单表单。 我也在使用tipsy（工具提示插件）以及Formalize（外观插件）

【参考方案1】：

试试这个：

$('#form1 input').attr('readonly', 'readonly');

您可能希望包含更多元素#form1 input, #form1 textarea, #form1 select 在 jQuery 中，您通常不需要遍历集合。 attr 将适用于与单个元素相同的集合。 在您的情况下，#form1 仅匹配 <form> 元素，并且针对该元素触发了each一次。要查找所有元素（输入或不输入），您可以写#form1 *。

【讨论】：

只是一个技术问题，但“attr('readonly', true)” 比“attr('readonly', 'readonly')”更好。jQuery 的“attr()”方法对 DOM 属性进行操作，不是实际的 html 属性，“readonly”的属性值必须是“true”或“false”。恰好在 javascript 中 'readonly' 强制转换为 true，但最好包含布尔值开头。

@Phill，它有多精确不适合你？它什么都不做吗？返回一个js错误？还有什么？

@Ben Lee，我正在使用 FireBug 控制台，我没有看到任何执行错误，查看源代码我没有将 readonly="readonly" 应用于 form1 中的任何输入元素

@Phil - 看看这个例子：jsfiddle.net/8vSKR。尝试发布更多代码，以便我们帮助:)

请注意，输入单选不接受“只读”属性，对于这种元素，您必须使用：$('#form1 input[type=radio]').attr( '禁用'，真）

【参考方案2】：

最好使用input selector。另请注意 Read only 仅适用于 text 和 password 和 textarea 的输入类型。它不适用于选择元素、单选、复选框、按钮。如果您想显示但不允许他们键入或单击。尝试使用禁用。

$("#form1 :input").attr("disabled", true);

注意：使用disabled会使输入、选择或文本区域变灰，但在提交时不会发布此元素。如果您需要它发布，请告诉我，我可以帮助您。

这是demohttp://jsfiddle.net/j5PAn/

【讨论】：

@Phil 我实际上并没有完成输入我的问题...您可能需要重新阅读

@eXtreme 您需要序列化所有禁用的元素并发布您的序列化数据。

【参考方案3】：

获取表单的所有元素：

$.each($('form').serializeArray(), function(index, value)
    $('[name="' + value.name + '"]').attr('readonly', 'readonly');
);

【参考方案4】：

<form>
    <fieldset disabled>
        <input type="text">
        <input type="radio">
        <input type="checkbox">
    </fieldset>
</form>

可能是最好的方法