javascript - jQueryを使用してフォームの入力フィールドを無効にする

Question

最近、Liferay 6.0、JSF 2.1、jQuery1.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');
});

入力フィールドは無効になっていません。このコードの何が問題になっているのか教えてください。

score 3 · Accepted Answer

コロンは HTML 要素の ID/名前では有効ですが、疑似セレクターの開始を表すため、CSS セレクターでは特殊文字です。CSS セレクターでエスケープする必要があります。

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

jQueryを使用してJSFコンポーネントを選択するには? （代替案を含むより詳細な回答について）
デフォルトでは、JSF は使用できない ID を生成します。これは、Web 標準の css 部分と互換性がありません (他の誰かが、それは標準と互換性がないと主張しましたが、答えはそれが間違っていることを証明しました)。

score -1 · Accepted Answer

それにクラスを追加してみてください：

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

2 に答える 2