この記事では、JavaScript の HTML DOM 入力チェックボックスの「無効」プロパティの目的、仕組み、使用法について説明します。
HTML DOM 入力チェックボックスの「無効」プロパティは JavaScript でどのように機能しますか?
入力チェックボックス「 無効 」プロパティは「checkbox」属性に依存します。これは、HTML フォームと入力フィールドで動作し、指定されたチェックボックスを無効にしたり無効から解除したりします。
構文 (無効なプロパティを設定する)
チェックボックスオブジェクト。 無効 = 真実 | 間違い定義された戻り構文に従って、「disabled」プロパティは次の 2 つのパラメーターをサポートします。
- 真実： 対応するチェックボックスが無効になっていることを表します。
- false (デフォルト値): これは、関連するチェックボックスが無効になっていないことを示すオプションの値です。
Return (無効なプロパティを返す)
チェックボックスオブジェクト。 無効上記の構文では、「 チェックボックスオブジェクト 「」はHTML「」に相当します。 チェックボックス ' エレメント。
以下の例で上で定義した構文を利用して、「disabled」プロパティの実際の実装を理解しましょう。
例 1: 入力チェックボックスの「無効」プロパティを適用する 基本的な構文の使用
最初の例では、定義された一般化された構文を使用して無効にする「チェックボックス」が追加されています。
HTMLコード
まず、指定された HTML コードを分析します。
< ボディスタイル = 「テキスト配置: 中央」 >
< h2 > HTML DOM入力 チェックボックス JavaScriptのdisabledプロパティ h2 >
チェックボックス : < 入力方式 = 「チェックボックス」 ID = 'デモ' > フォームが送信されました < br >< br >
< p > 指定されたチェックボックスが無効になっています p >
上記のコード行では次のようになります。
- ” <本文> ” タグは、” に整列する本文セクションを指定します。 中心 」の助けを借りて スタイル ' 属性。
- ” ”タグはレベル2の小見出しを定義します。
- ” <入力> ”タグは入力タイプを指定して”チェックボックス”を作成します。 チェックボックス 「割り当てられたIDを持つ」 デモ ”。
- ” ” タグは、結果を表示する段落要素を追加します。
JavaScript コード
次に、JavaScript コードを見てみましょう。
< 脚本 >書類。 getElementById ( 'デモ' ) 。 無効 = 真実 ;
脚本 >
上記のコード スニペットでは、「 document.getElementById() ” メソッドが適用され、ID「demo」を使用してチェックボックスを取得し、「disabled」プロパティの値が「」に設定されます。 真実 」チェックボックスを無効にします。
出力
上記の出力は、指定されたチェックボックスが「 無効 「」プロパティが「」に設定されました 真実 ”。
例 2: 入力チェックボックスの「無効」プロパティ値を返す
この例では、「disabled」プロパティを適用して、対象のチェックボックスのステータスをブール値 (true/false) として返します。
HTMLコード
次の HTML コードを考えてみましょう。
< ボディスタイル = 「テキスト配置: 中央」 >< h2 > HTML DOM入力 チェックボックス JavaScriptのdisabledプロパティ h2 >
チェックボックス : < 入力方式 = 「チェックボックス」 無効 = 真実 ID = 'デモ' > フォームが送信されました < br >< br >
< PID = 'サンプル' > p >
上記のコード ブロックでは次のようになります。
- チェックボックスが割り当てられ、「 無効 「プロパティは「」に設定されています 真実 ”。
- その後、空の「」 」要素が割り当てられた ID「sample」とともに追加され、出力が追加されます。
JavaScript コード
次に、JavaScript コードに進みます。
< 脚本 >ある = 書類。 getElementById ( 'デモ' ) 。 無効 ;
書類。 getElementById ( 'サンプル' ) 。 内部HTML = ある ;
脚本 >
上記のコードでは次のようになります。
- 変数「 ある 」を利用します。 document.getElementById() 」メソッドを使用して、ID「demo」を使用してチェックボックスにアクセスし、「 無効 ” プロパティを使用して、取得したチェックボックスが無効になっているかどうかを確認します。
- 再度適用された「document.getElementById()」メソッドは、含まれている空の段落を取得し、「disabled」プロパティのステータスを段落として表示します。
出力
分析すると、結果は「チェックボックス」に割り当てられたステータスを返します。つまり、「 真実 ”。
例 3: 入力チェックボックスの「disabled」プロパティを使用してチェックボックスを無効化および無効化解除する
チェックボックスのステータスを設定して返すだけでなく、「無効」プロパティを使用すると、ユーザーはチェックボックスを同時に無効にしたり無効から解除したりすることもできます。実際に見てみましょう。
HTMLコード
書かれた HTML コードを確認してみましょう。
< ボディスタイル = 「テキスト配置: 中央」 >< h2 > HTML DOM入力 チェックボックス JavaScriptのdisabledプロパティ h2 >
チェックボックス : < 入力方式 = 「チェックボックス」 ID = 'デモ' > フォームが送信されました 入力 >< br >< br >
< ボタンオンクリック = 「チェック無効()」 > チェックボックスを無効にする ボタン >
< ボタンオンクリック = 「checkUndisable()」 > チェックボックスを無効にする ボタン >
上記のコード ブロックでは次のようになります。
- 同様に、チェックボックスを含めて、「」の付いたボタンを追加します。 クリック時 」を実行するイベント checkDisable() 」ボタンをクリックすると機能します。
- その後、2 番目のボタンが追加されます。このボタンも「onclick」イベント ハンドラーを使用して「 checkUndisable() 」ボタンをクリックすると機能します。
JavaScript コード
次に、以下のコードを実行します。
< 脚本 >機能チェック無効 ( ) {
書類。 getElementById ( 'デモ' ) 。 無効 = 真実 ;
}
機能チェック無効 ( ) {
書類。 getElementById ( 'デモ' ) 。 無効 = 間違い ;
}
脚本 >
上記のコード行では次のようになります。
- 「」という名前の関数を定義します。 checkDisable() 「」を適用する document.getElementById() 」メソッドを使用して、ID「demo」を介してチェックボックスにアクセスし、その値を「true」に設定します。
- 2つ目の機能「 checkUndisable() 」関数は、再び「document.getElementById()」メソッドを適用してチェックボックスに再度アクセスし、ユーザーが「チェックボックスの無効化を解除する」という名前の付属の 2 番目のボタンをクリックすると、その値を「false」に設定します。
出力
出力では、ユーザーが最初のボタンをクリックすると指定されたチェックボックスが「無効」になり、それに応じてユーザーが 2 番目のボタンをクリックするとチェックボックスが「無効解除」されます。
結論
JavaScript では、HTML DOM 入力チェックボックス「 無効 」プロパティは、ユーザーが「チェックボックス」のチェック状態を設定および返すのを支援します。これは、「set」プロセスと「return」プロセスの両方の一般化された構文を定義します。その set 構文は 2 つの値で機能します。 真実 ' と ' 間違い ”。一方、戻り構文にはパラメータは必要ありません。この記事では、JavaScript での HTML DOM 入力チェックボックスの「無効」プロパティの目的、機能、実践的な実装について説明しました。