web-dev-qa-db-ja.com

この単純なjQueryを使用してHTMLテキストフィールドを無効にするにはどうすればよいですか？

テストするこの単純なjQueryコードがあります。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
          $("text").attr("disabled","");
      });
    });
</script>
</head>
<body>
<input type="text">
<br />
<button>Set the textfield disabled</button>
</body>
</html>

基本的に、HTMLページにはシンプルなボタンとテキストフィールドが付属しています。ボタンをクリックするときに入力フィールドを無効にしたいのです。しかし、それは機能しませんか？

（追記：このコードは、jQueryの強力さをテストするためだけに、w3schools.com Webサイトから提供されています）

jqueryhtmltextfield
11
awongCM

JQuery 1.7から、_.prop_を使用できます。

_$(document).ready(function(){
  $("button").click(function(){
      $(":text").prop("disabled", true);
  });
});
_

1.7より前では、次のことができました。

_$(document).ready(function(){
  $("button").click(function(){
      $(":text").attr("disabled", true);
  });
});
_

PS：$(":text")または$('input[type="text"]')を使用して、テキスト型のすべての要素を選択します。

13
xdazz

これを試して：

    <html>   
<head>   
<script type="text/javascript" src="jquery.js"></script>   
<script type="text/javascript">   
$(document).ready(function(){     
$("button").click(function(){         
$("#text").attr("disabled","true");     
});   
});   
</script>   
</head>   
<body>  
 <input id="text" type="text">
<br />
<button>Set the textfield disabled</button>
</body>
</html>
2
Tapas Mahata

textにjqueryセレクターはありません。属性セレクター[attribute=value]を使用する必要があります

$('input[type=text]').prop('disabled', true); // prop Works on jquery 1.7+

または：

$('input[type=text]').attr('disabled', 'disabled'); // Works in each version. 
                                                    // But isn't W3C standard.

:textセレクターがありますが、最初のオプションよりも効率が低くなります。 docs を参照してください。

$（ '：text'）は$（ '[type = text]'）と同等であるため、すべての要素が選択されます。他の疑似クラスセレクター（「：」で始まるもの）と同様に、タグ名または他のセレクターを前に付けることをお勧めします。それ以外の場合は、ユニバーサルセレクター（ ""）が暗黙指定されます。つまり、裸の$（ '：text'）は$（ '：text'）と同等であるため、代わりに$（ 'input：text'）を使用する必要があります。

追記事項：：textはjQuery拡張機能であり、CSS仕様の一部ではないため、：textを使用したクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。最新のブラウザでパフォーマンスを向上させるには、代わりにse [type = "text"]を使用してください。

のXHTMLは無効であることに注意してください。 <input type="text"> => <input type="text" />を閉じる必要があります

1
gdoron is supporting Monica

または（より現代的）：

$("input[type=text]").prop('disabled', true);
1
devnull69

$（ "input"）。attr（ "disabled"、 "disabled"）;

0
gabitzish