jQueryで「disabled」属性を削除する方法

jQueryで「disabled」属性を削除する方法

概要

removeAttr() メソッドは、指定された要素から属性を削除します。

$(selector).removeAttr('disabled');

例:

<input type="text" id="text-input" disabled>

$('#text-input').removeAttr('disabled');

このコードを実行すると、#text-input 要素の disabled 属性が削除され、入力可能になります。

prop() メソッドは、要素のプロパティを取得または設定します。

$(selector).prop('disabled', false);

<input type="text" id="text-input" disabled>

$('#text-input').prop('disabled', false);

どちらの方法でも同じ結果になりますが、一般的には removeAttr() メソッドの方が簡潔で分かりやすいのでおすすめです。

• 上記のコードは、単一の要素から disabled 属性を削除する例です。複数の要素から属性を削除するには、セレクターを変更する必要があります。
• disabled 属性を削除すると、その要素がフォーカス可能になることに注意してください。フォーカスを制御したい場合は、tabIndex プロパティも設定する必要があります。

HTML:

<input type="text" id="text-input" disabled>
<button id="remove-disabled-button">disabled属性を削除</button>

JavaScript:

$(document).ready(function() {
  $('#remove-disabled-button').click(function() {
    // 1. removeAttr() メソッドを使う
    // $('#text-input').removeAttr('disabled');

    // 2. prop() メソッドを使う
    $('#text-input').prop('disabled', false);
  });
});

その他のサンプルコード:

• 複数の要素から disabled 属性を削除する:

$('.disabled-input').removeAttr('disabled');

if ($('#some-condition').is(':checked')) {
  $('#text-input').prop('disabled', false);
}

jQueryで「disabled」属性を削除するその他の方法

$(selector).attr('disabled', false);

<input type="text" id="text-input" disabled>

$('#text-input').attr('disabled', false);

addClass() メソッドと removeClass() メソッドは、要素にクラスを追加または削除します。

<input type="text" id="text-input" disabled class="disabled">

$('#text-input').removeClass('disabled');

<input type="text" id="text-input" disabled>

$('#text-input').html('<input type="text" id="text-input">');

• 簡潔な方法で disabled 属性を削除したい場合は、removeAttr() メソッドまたは prop() メソッドを使うのがおすすめです。
• 特定の条件に基づいて disabled 属性を削除したい場合は、attr() メソッドまたは addClass() メソッドと removeClass() メソッドを使うのがおすすめです。
• HTML コードを直接編集したい場合は、html() メソッドを使うのがおすすめです。