使用 jQuery 禁用表单中的输入字段答案

【问题标题】：Disabling input fields in a form using jQuery使用 jQuery 禁用表单中的输入字段
【发布时间】：2012-07-07 03:10:30
【问题描述】：

我最近升级到 Liferay 6.0、JSF 2.1 和 jQuery 1.7。

这是我的 html 表单：

 <h:form id="fundRequestForm" action="" method="post">
      <!-- Inside this I have various form field -->
    </h:form>

html页面源码中生成的表单：

<form id="_jpfcpncuivr_A2262_j_id1:fundRequestForm" name="_jpfcpncuivr_A2262_j_id1:fundRequestForm"
method="post" action="">
</form>

我想禁用隐藏表单域以外的表单中的所有输入域。

这是我的 javascript

jQuery(document).ready(function()
{
  jQuery('form#_jpfcpncuivr_A2262_j_id1:fundRequestForm input[type!="hidden"]').attr('disabled', 'true');
});

输入字段没有被禁用。请让我知道这段代码有什么问题。

【问题讨论】：

【解决方案1】：

尝试添加一个类：

<h:form id="fundRequestForm" action="" method="post" class="someClass">
  <!-- Inside this I have various form field -->
</h:form>

JS：

jQuery(document).ready(function()
{
  jQuery('.someClass input').prop('disabled', true); //<-- use prop NOT attr
});

【讨论】：

但是这个表单元素 ID 是自动生成的，尤其是“_jpfcpncuivr_A2262_j_id1:”。这将附加到上面给出的表单 ID“fundRequestForm”
另外你能告诉我使用 prop 和 attr 的区别吗？
@Sri See here for the BIG differences between prop and attr

【解决方案2】：

虽然在 HTML 元素 ID/名称中有效，但冒号在 CSS 选择器中是一个特殊字符，因为它代表伪选择器的开始。您需要在 CSS 选择器中对其进行转义。

jQuery('form#_jpfcpncuivr_A2262_j_id1\\:fundRequestForm input[type!="hidden"]').attr('disabled', 'true');

【讨论】：

你还推荐我使用 prop over attr 吗？
在你的特殊情况两者都一样好。主要区别在于仅检索值。然而，一般推荐的方法是更喜欢prop() 而不是attr()。但同样，这不会对您的特定情况产生任何影响。有关详细信息，请参阅jQuery.prop() documentation。