知ってた？ナルホド！
こんにちは！コーダーの平原です。
コーディングをしていると、フォームを作成する機会もかなり多いです。
今回は、jQueryのonメソッドとpropメソッドを使って特定のフォームの状態が変わったら、他のフォーム部品の状態を変更する機能を作成してみました！
1. jQueryのonメソッド
以前、「onメソッドで出来ること」でご紹介した通り、指定した要素に対してイベントが発生した時に、処理を実行することができるメソッドです。
2. propメソッド
主に、inputなどのフォームで使用する要素の属性やプロパティを取得・変更することができるjQueryメソッドの１つです。
メソッドの第一引数に属性を指定した場合は、指定した属性を取得することができます。
第二引数には、要素に属性を付与するかを真偽値で指定します。
一般的には、disabledやcheckedなどの値を省略可能な属性に対して使用します。
3. チェックボックスにチェックが入ったら、ボタンを押せるようにする
onメソッドとpropメソッドを使用して、チェックボックスにチェックが入ったときに、ボタンを押して送信することができる機能を作成しました。
onメソッドで定義できるイベントの一つで、changeというイベントがあります。
changeイベントは指定要素の値が変更されたときに、処理を実行することができるもので、今回は、チェックボックスの値が変更されたときに、if文を使った条件分岐を行います。
条件分岐はpropメソッドを使用して、チェックボックスのチェック状態を判定し、チェックがついていたら、送信ボタンのdisabled属性を外し、チェックがついていなければ、送信ボタンのdisabled属性を付与しています。
送信ボタンの属性の付け替えにもpropメソッドを使用しています。
4. まとめ
フォームの中では、個人情報の同意などのチェックボックスにチェックを入れたときに、送信ボタンが押せるようになるといった使い方が多いです。
propメソッドを使うことで他のフォーム部品の制御だけではなく、特定の要素の表示の切り替えなどにも使用できそうです。
WebサイトやWebアプリの制作にはフォームはかかせないものですが、propメソッドとchangeイベントを組み合わせることで、こんなに簡単にフォームの機能を作成することができました！
参考サイト :
