jqueryで入力要素を編集不可に設定する方法

jQuery は、Web 開発をより簡単かつ効率的に行うための多くの便利な関数とメソッドを開発者に提供する人気の JavaScript ライブラリです。 Web 開発では、特定の入力要素を編集不可に設定する必要がある状況によく遭遇します。この記事ではjQueryを使ってinput要素を編集不可に設定する方法を紹介します。

入力要素を編集不可に設定する必要があるのはなぜですか?

フォームに特定のデータを表示する必要があるが、ユーザーにデータを変更させたくない場合があります。この場合、input 要素を編集不可に設定する必要があります。さらに、フォームでは一部の入力要素は読み取り専用です。つまり、ユーザーは表示できますが編集できません。これらのシナリオでは、フォーム データの正確さと完全性を確保するために、input 要素を編集不可に設定する必要があります。

jQuery の prop() メソッドは、入力要素を編集不可に設定します。

jQuery の prop() メソッドは、HTML 要素の属性値を取得および設定するために使用できます。 input 要素を編集不可にするには、その「readonly」属性を true に設定するだけです。コードは次のとおりです。

$(document).ready(function(){
    $("input").prop("readonly", true);
});

上記のコードは、すべての入力要素を読み取り専用、つまり編集不可に設定します。特定の入力要素のみを編集不可にしたい場合は、クラス セレクターまたは ID セレクターを使用して要素をフィルターし、設定できます。たとえば、クラス名「my-input」を持つすべての入力要素を読み取り専用に設定するには、コードは次のようになります。

$(document).ready(function(){
    $("input.my-input").prop("readonly", true);
});

特定の ID を持つ入力要素を読み取り専用に設定する場合は、ただし、コードは次のとおりです。

$(document).ready(function(){
    $("#my-input").prop("readonly", true);
});

jQuery の attr() メソッドは、入力要素を編集不可に設定します

prop() メソッドの使用に加えて、 attr() メソッドを使用して、入力要素を編集不可に設定します。コードは次のとおりです。

$(document).ready(function(){
    $("input").attr("readonly", true);
});

prop() メソッドと比較して、attr() メソッドはより多くの属性を設定できますが、ブール型の属性を設定する場合は prop() メソッドの方が便利です。

概要

この記事では、jQuery を使用して入力要素を編集不可に設定する方法を学びました。 input 要素を読み取り専用にするには、「readonly」属性を true に設定します。 prop() メソッドと attr() メソッドを使用する場合、prop() メソッドはブール型のプロパティの設定に適しているのに対し、attr() メソッドはすべてのタイプのプロパティに適していることに注意してください。特定のシナリオとニーズに基づいて適切な方法を選択してください。

以上がjqueryで入力要素を編集不可に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。