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

Question

我正在使用jQuery为所有表单元素添加只读属性，但似乎无法弄清如何实现。

以下是我的尝试：

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

我有一个简单的表单，使用label/input来显示表单元素。 同时我也使用了tipsy（工具提示插件）以及Formalize（外观插件）。

- Phill Pafford

Answer 1

试试这个：

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

• 您可能需要包含更多的元素 #form1 input, #form1 textarea, #form1 select
• 在jQuery中，通常不需要遍历整个集合。对于集合来说，attr 的工作方式与单个元素相同。
• 在您的情况下，#form1 仅匹配了 <form> 元素，并且 each 只触发了一次，只针对该元素。要查找所有元素（无论是否为输入元素），您可以编写 #form1 *。

- Kobi

---

仅仅是一个技术上的细节，但是使用"attr('readonly', true)"比起"attr('readonly', 'readonly')"更好。jQuery的"attr()"方法作用于DOM属性而不是实际的HTML属性，而且"readonly"属性值必须为"true"或者"false"。虽然在javascript中'readonly'会被转换为true，但最好一开始就包含布尔值。 - Ben Lee

@Phill，它对你来说有什么精确的问题？ 它完全没有反应吗？ 返回JS错误？ 还是其他什么问题？ - Ben Lee

请注意，由于输入型单选框不接受“readonly”属性，所以您必须使用以下代码：$('#form1 input[type=radio]').attr('disabled', true)。这将禁用单选框的用户输入功能。请注意，这并非改变单选框的只读状态，而是完全禁止用户输入。 - Marcio Mazzucato

根据https://dev59.com/cW025IYBdhLWcg3wpHh-，只读部分区分大小写，应为'readOnly'。 - CamHart

@CamHart - 那个有文档吗？据我所知，jQuery 处理了这个问题：prop，attr。无论如何，这个答案有点过时了，但是据我所见，测试是可行的：http://jsfiddle.net/8vSKR/ - Kobi

Answer 2

使用input选择器是更好的选择。需要注意的是只有文本输入框、密码输入框和文本域才能设置为只读。对于选择框、单选框、复选框和按钮等元素无效。如果你想要仅仅显示这些元素但不允许用户进行编辑或点击，可以考虑使用disabled属性。

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

注意：使用 disabled 属性会将输入框，下拉列表或文本域变灰，但不会在提交表单时将此元素传递给服务器。如果您需要它被提交，请告诉我，我可以帮助您。

这里是一个演示：http://jsfiddle.net/j5PAn/

- John Hartsock

---

@Phil 我其实还没有完成输入我的问题... 你可能需要重新阅读。 - John Hartsock

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

Answer 3

获取所有表单元素：

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

- Emmanuel

Answer 4

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

可能最好的方法就是这样做

- Rossitten