ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用して HTML 入力要素から「disabled」属性を削除するにはどうすればよいですか?

JavaScript を使用して HTML 入力要素から「disabled」属性を削除するにはどうすればよいですか?

WBOY
WBOY転載
2023-08-31 13:17:02646ブラウズ

如何使用 JavaScript 从 HTML 输入元素中删除“禁用”属性?

HTML では、input 要素を使用して、フォームの作成などの方法でユーザーからの入力を受け取ることができます。チェックボックス、ラジオボタン、テキスト、数字など、さまざまなタイプの入力要素があります。

すべての要素で「disabled」プロパティを使用すると、入力フィールドを無効にし、ユーザーが入力要素を操作できないようにすることができます。場合によっては、JavaScript を使用して無効な属性を追加および削除する必要があります。たとえば、年齢が 18 歳を超えるユーザーのパン カード番号を取得したいとします。そのため、JavaScript から無効なプロパティを削除して、ユーザーが 18 歳を超える年齢を入力した場合にのみパン カード入力フィールドを有効にする必要があります。

ここでは、JavaScript を使用して HTML 入力要素から disabled 属性を削除するさまざまな方法を学習します。

removeAttribute() メソッドの使用

最初のアプローチでは、removeAttribute() メソッドを使用して無効な属性を削除します。これは、メソッドのパラメータとして渡す HTML 要素から属性を削除するために使用されます。

###構文###

ユーザーは、以下の構文に従って、removeAttribute() メソッドを使用して、入力要素から「disabled」属性を削除できます。

リーリー

上記の構文では、「無効」である属性名をメソッドのパラメーターとして渡しました。

###例###

以下の例では、HTML 部分にテキスト入力フィールドを定義しています。ユーザーがボタンをクリックするたびに、removeDisabled() 関数が呼び出されます。

remvoeDisabled() 関数では、ID によって入力要素にアクセスします。その後、input 要素を参照として取得し、パラメーターとして「disabled」を渡して、removeAttribute() メソッドを実行します。

出力では、ユーザーはボタンをクリックする前は入力要素を操作できませんが、ボタンをクリックした後は操作できることがわかります。

リーリー

「無効」プロパティの変更

このアプローチでは、HTML 要素から無効なプロパティを削除するのではなく、「無効」プロパティの値を変更します。 「無効」プロパティはブール値を受け取ります。無効なプロパティのデフォルト値は「true」ですが、「false」に設定することもできます。これは、任意の入力要素から「disabled」プロパティを削除するのと同じように機能します。 ###構文###

ユーザーは、以下の構文に従って、無効なプロパティの値を false に変更できます。

リーリー

例 1

以下の例では、複数のテキスト入力要素を作成しましたが、デフォルトではすべて無効になっています。 JavaScript では、すべての入力要素にアクセスし、forEach() メソッドを使用して入力のノード リストを反復します。 forEach() メソッド内で、各入力の無効なプロパティの値を false に変更します。

出力では、ボタンをクリックした後、すべての入力要素が扱いにくいことがわかります。

リーリー

例 2

以下の例では、複数のチェックボックス入力を作成し、すべてのチェックボックスに無効属性を追加して無効にしました。 RemoveDisable() 関数では、すべてのチェックボックスにアクセスし、各チェックボックスの「無効」プロパティを変更します。

リーリー

JavaScript を使用して、入力要素から無効なプロパティを削除する方法を学びました。最初のアプローチでは、removeAttribute() メソッドを使用して、入力要素から無効なプロパティを削除しました。 2 番目の要素では、無効なプロパティの値を HTML 要素から削除するのではなく変更しますが、input 要素を有効にするという目標は達成できます。

以上がJavaScript を使用して HTML 入力要素から「disabled」属性を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。