ここにjsfiddleがあります。
jQuery
$(function() {
//var input = $('form :input[type="text"]')
$('form :input[type="text"]').live('keyup', function() {
$('form .create-playlist-button')
.attr('disabled', $('form :input[type="text"]').val().length == 0);
});
});
必要
テキストボックスにデータを入力し始めると、作成が有効になっているはずです。
テキストボックスからすべてのテキストを削除するときは、作成を無効にする必要があります。
私はjQueryを初めて使用しますが、これはうまくいきません。
$('form :input[type="text"]').live('keyup', function() {
var val = $.trim(this.value); // this.value is faster than $(this).val()
$('form .create-playlist-button').prop('disabled', val.length == 0);
});
ここでは、jQuery docを使用する必要があるため、.prop()代わりに を使用しました。また、値の先頭と末尾から空白を削除するためにも使用しました。.attr().prop().trim()
あなたのコードでは$('form :input[type="text"]')、2 回使用しました。1 つは bind イベント用で、もう 1 つはテキスト フィールドの値を取得するためです。ただし、keyupイベント ハンドラー関数内では、イベントがバインドされた要素thisを参照するため、これは必須ではありません。inputkeyup
何らかの目的でセレクターを複数回使用する必要がある場合は、それを変数にキャッシュして、その変数を再利用することをお勧めします。ちょうど例：
var input = $('form :input[type="text"]');
input.on('click', function() {
alert( this.value );
input.addClass('something');
});
for delegate イベント ハンドラ.on()の代わりに使用した方がよい場合は、非推奨になったためです。.live().live()
.on()次のように使用できます。
$('form').on('keyup', ':input[type="text"]', function() {
var val = $.trim(this.value);
$('form .create-playlist-button').prop('disabled', val.length == 0);
});
.on()デリゲート イベント処理の構文は次のようになります。
$(staticContainer).on( eventName, target, handlerFunction )
ここで、staticContainerページの読み込み時に DOM に属する要素、つまり動的ではなくtarget、イベントをバインドするコンテナーでもある要素をポイントします。
更新しました：
$(function(){
//var input = $('form :input[type="text"]')
$('form :input[type="text"]').live('keyup',function(){
$(this).closest('form').find('.create-playlist-button').prop('disabled',$(this).val().length==0);
});
});
「keyup」ハンドラーでは、 を使用this(または$(this)jQuery 経由で使用) して、実際に関係するテキスト フィールドを取得します。また、正しい「コンパニオン」ボタンが見つかるようにコードを変更しました。親要素のチェーンを検索して囲ん<form>でいる を見つけ、そのフォーム内のボタンを見つけます。
イベント ハンドラーを割り当てる方法は非推奨です。そのはず：
$('form').on('keyup', ':input[type="text"]', function(){ ...
また、「keyup」の代わりに「keypress」をチェックすると、2 文字目までボタンが機能しないバグを修正できます。
edit — ああ、もう 1 つ: 通常は.prop()属性の更新に使用する必要があり.attr()ます。新しい jQuery API についてはややこしいことですが、使用する必要がある場合.attrはまれです。残念ながら、jQuery 1.6 がリリースされる前に書き戻された古い教材がたくさんあります。
.change() メソッドを使用する必要があります。
そして、その中でテストを行うだけです：
if ($(this).val().length > 0)
...
else
...
ここに行きます...元のフィドルを使用して：