【初心者向け】jQueryでボタンを無効化する
jQueryでボタンを無効化する
disabled属性を設定する
HTML
<button id="my-button">送信</button>
jQuery
// ボタンを無効にする
$('#my-button').prop('disabled', true);
// ボタンを有効にする
$('#my-button').prop('disabled', false);
解説
prop() メソッドを使って disabled 属性を設定することで、ボタンを無効化できます。disabled 属性に true を設定するとボタンが無効化され、false を設定すると有効化されます。
addClass() メソッドと removeClass() メソッドを使う
<button id="my-button">送信</button>
// ボタンを無効にする
$('#my-button').addClass('disabled');
// ボタンを有効にする
$('#my-button').removeClass('disabled');
addClass() メソッドと removeClass() メソッドを使って、ボタンに disabled クラスを追加したり削除したりすることで、ボタンを無効化できます。disabled クラスは、多くの場合、ボタンを無効化するために使用されます。
attr() メソッドを使う
<button id="my-button">送信</button>
// ボタンを無効にする
$('#my-button').attr('disabled', 'disabled');
// ボタンを有効にする
$('#my-button').removeAttr('disabled');
これらの方法に加えて、click() イベントハンドラを使って、ボタンがクリックされたときに無効化するといった方法もあります。
disabled属性を設定する
<button id="my-button">送信</button>
<script>
$(function() {
// ボタンを無効にする
$('#my-button').prop('disabled', true);
// 3秒後にボタンを有効にする
setTimeout(function() {
$('#my-button').prop('disabled', false);
}, 3000);
});
</script>
このコードでは、まず disabled 属性を true に設定してボタンを無効化します。3秒後に disabled 属性を false に設定してボタンを有効化します。
addClass() メソッドと removeClass() メソッドを使う
<button id="my-button">送信</button>
<script>
$(function() {
// ボタンを無効にする
$('#my-button').addClass('disabled');
// 3秒後にボタンを有効にする
setTimeout(function() {
$('#my-button').removeClass('disabled');
}, 3000);
});
</script>
このコードでは、まず addClass() メソッドを使って disabled クラスをボタンに追加して、ボタンを無効化します。3秒後に removeClass() メソッドを使って disabled クラスをボタンから削除して、ボタンを有効化します。
attr() メソッドを使う
<button id="my-button">送信</button>
<script>
$(function() {
// ボタンを無効にする
$('#my-button').attr('disabled', 'disabled');
// 3秒後にボタンを有効にする
setTimeout(function() {
$('#my-button').removeAttr('disabled');
}, 3000);
});
</script>
data() メソッドを使う
<button id="my-button">送信</button>
// ボタンを無効にする
$('#my-button').data('disabled', true);
// ボタンを有効にする
$('#my-button').data('disabled', false);
data() メソッドを使って、ボタンにカスタムデータ属性を設定することができます。この方法では、disabled という名前のデータ属性を設定して、ボタンを無効化できます。
enable() メソッドと disable() メソッドを使う
<button id="my-button">送信</button>
// ボタンを無効にする
$('#my-button').disable();
// ボタンを有効にする
$('#my-button').enable();
enable() メソッドと disable() メソッドを使って、ボタンを有効・無効化できます。これらのメソッドは、jQuery UIプラグインの一部です。
prop() メソッドを使って checked 属性を設定する
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">送信</label>
// ボタンを無効にする
$('#my-checkbox').prop('checked', true);
// ボタンを有効にする
$('#my-checkbox').prop('checked', false);
この方法は、チェックボックスを無効化する場合に有効です。prop() メソッドを使って checked 属性を true に設定すると、チェックボックスが無効化されます。
hide() メソッドを使う
<button id="my-button">送信</button>
// ボタンを無効にする
$('#my-button').hide();
// ボタンを有効にする
$('#my-button').show();
この方法は、ボタンを完全に非表示にする場合に有効です。hide() メソッドを使ってボタンを非表示にすると、ボタンをクリックすることができなくなります。
jQueryでボタンを無効化する方法はいくつかあります。これらの方法を参考に、あなたの目的に合った方法でボタンを無効化してください。
jquery
