【徹底解説】JavaScriptでinput要素を無効/有効にする方法

jQueryでinput要素を無効/有効にする方法

jQueryを使用して、input要素を無効/有効にする方法はいくつかあります。

方法

prop() メソッドを使用して、disabled プロパティを設定することで、input要素を無効/有効にすることができます。

無効にする

$("input").prop("disabled", true);

$("input").prop("disabled", false);

$("input").attr("disabled", "disabled");

$("input").removeAttr("disabled");

$("input").addClass("disabled");

$("input").removeClass("disabled");

enable() / disable() メソッドを使用して、input要素を直接有効/無効にすることができます。

$("input").disable();

$("input").enable();

以下のサンプルコードは、上記の各方法を使用して、input要素を無効/有効にする例です。

<input type="text" id="input-text">
<button id="button-disable">無効化</button>
<button id="button-enable">有効化</button>

<script>
$(document).ready(function() {
  $("#button-disable").click(function() {
    // 方法 1
    // $("input").prop("disabled", true);

    // 方法 2
    // $("input").attr("disabled", "disabled");

    // 方法 3
    // $("input").addClass("disabled");

    // 方法 4
    $("input").disable();
  });

  $("#button-enable").click(function() {
    // 方法 1
    // $("input").prop("disabled", false);

    // 方法 2
    // $("input").removeAttr("disabled");

    // 方法 3
    // $("input").removeClass("disabled");

    // 方法 4
    $("input").enable();
  });
});
</script>

補足

• 上記のサンプルコードでは、#button-disable ボタンをクリックするとinput要素が無効化され、#button-enable ボタンをクリックすると有効化されます。
• 使用する方法は、開発者の好みや状況によって異なります。

HTML

<input type="text" id="input-text">
<button id="button-disable-prop">無効化 (prop)</button>
<button id="button-enable-prop">有効化 (prop)</button>
<button id="button-disable-attr">無効化 (attr)</button>
<button id="button-enable-attr">有効化 (attr)</button>
<button id="button-disable-class">無効化 (class)</button>
<button id="button-enable-class">有効化 (class)</button>
<button id="button-disable-enable">無効化 (enable/disable)</button>
<button id="button-enable-enable">有効化 (enable/disable)</button>

JavaScript

$(document).ready(function() {
  $("#button-disable-prop").click(function() {
    $("input").prop("disabled", true);
  });

  $("#button-enable-prop").click(function() {
    $("input").prop("disabled", false);
  });

  $("#button-disable-attr").click(function() {
    $("input").attr("disabled", "disabled");
  });

  $("#button-enable-attr").click(function() {
    $("input").removeAttr("disabled");
  });

  $("#button-disable-class").click(function() {
    $("input").addClass("disabled");
  });

  $("#button-enable-class").click(function() {
    $("input").removeClass("disabled");
  });

  $("#button-disable-enable").click(function() {
    $("input").disable();
  });

  $("#button-enable-enable").click(function() {
    $("input").enable();
  });
});

動作

• 各ボタンをクリックすると、対応するメソッドを使用してinput要素が無効/有効化されます。
• 無効化されたinput要素は、値を入力したり、フォーカスしたりすることができません。

• prop() メソッド: disabled プロパティを true に設定するとinput要素が無効化され、false に設定すると有効化されます。
• enable() / disable() メソッド: disable() メソッドを呼び出すとinput要素が無効化され、enable() メソッドを呼び出すと有効化されます。

上記以外でinput要素を無効/有効にする方法

readonly 属性を設定すると、input要素への入力を受け付けなくなります。

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

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

tabindex 属性を -1 に設定すると、input要素がタブ移動で選択されなくなります。

<input type="text" id="input-text" tabindex="-1">

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

CSSを使用して、input要素のポインターイベントを無効にすることができます。

#input-text {
  pointer-events: none;
}

#input-text {
  pointer-events: auto;
}

JavaScriptを使用して、input要素の disabled プロパティを直接設定/解除することができます。

document.getElementById("input-text").disabled = true;

document.getElementById("input-text").disabled = false;

注意事項

• readonly 属性は、ユーザーがinput要素の値を変更できないようにするだけですが、disabled 属性のように、フォーカスできないようにするものではありません。
• CSSを使用する方法は、すべてのブラウザでサポートされているわけではありません。