次のような HTML があります:
<input type="text" name="textField" />
<input type="submit" value="send" />
どうすればこのようなことができますか:
- テキスト フィールドが空の場合、送信は無効になります (disabled="disabled")。
- テキスト フィールドに何かを入力すると、無効な属性が削除されます。
- テキスト フィールドが再び空になった場合 (テキストが削除された場合)、送信ボタンは再び無効になります。
私は次のようなことを試しました:
$(document).ready(function(){
$('input[type="submit"]').attr('disabled','disabled');
$('input[type="text"]').change(function(){
if($(this).val != ''){
$('input[type="submit"]').removeAttr('disabled');
}
});
});
…しかし、うまくいきません。何かアイデアはありますか?
ベストアンサー1
問題は、フォーカスが入力から移動されたとき（たとえば、誰かが入力からクリックしたり、タブで移動したりしたとき）にのみ、変更イベントが発生することです。代わりに keyup を使用してみてください。
$(document).ready(function() {
$(':input[type="submit"]').prop('disabled', true);
$('input[type="text"]').keyup(function() {
if($(this).val() != '') {
$(':input[type="submit"]').prop('disabled', false);
}
});
});