Eyecatch jQuery

Javascript,jQuery

チェックボックスでフォームの disabled を設定/解除するスクリプトをjQueryで組んでみた。

2015/06/03

ラジオボタンでは作っていましたが、今回はチェックボックスでフォームのdisabledを制御するスクリプトを忘備録としてポストします。

checkbox + jQuery でフォームの disabled 制御

inputフォームに disabled を設定/解除

このフォームに disabled を設定する場合、jQuery では以下のようにします。

解除する場合は以下のようにします。

checkbox がチェックされているかを調査

checkbox がチェックされているかを調査するには、以下の(1)・(2)の方法があります。

(1)の場合は、チェックボックスがチェックされていれば "checked" が返り、
(2)の場合は、要素に設定されている value値を返します。このサンプルの場合は「1」がval2 として返ります。
チェックされていない場合は、(1)・(2)とも「undefined」が返ります。

では本題。
最初から書くと以下のようになります。

checkbox_disabled_controll_01

デモ

デモはこちらから
checkboxでdisabled制御 サンプル1

一応、これで終わっても良いのですが、複数個並んでいる場合も考えてみました。

checkbox + jQuery で複数個のフォームの disabled 制御

複数個の inputフォームに disabled を設定/解除

以下の様に、4つ並んでいる場合の方法。

checkbox_disabled_controll_02

配列とfor文を使うと便利です。
内容は殆ど変わっていませんが、for文と、変数名に連番を使っています。
変数名は #sampleImput"+cnt という風に、プラス記号を用いて文字連結します。

デモ

デモはこちらから
checkboxでdisabled制御 サンプル2

さらに、発展させてみます。

発展編

短いコードにする

for文と配列を使う形式でも問題無いといえば無いのですが、もうちょっと発展させてみたいと思います。
ラジオボタンとフォーム4つをさらに div で囲って ID を付ける形にします。(<div id="example3">)

そして、スクリプトは以下のように。

かなり、短くなりました。

動作対象とするチェックボックスのセレクターを"#"から始まる固定のID名ではなく、より汎用的にinput[type=checkbox] で絞り込むように指定しているのがミソ。
divで囲んだのは限定的にセレクターを指定するためです。

次の"チェックしたら"・"外したら"の部分は、サンプル1及び2で使った if 文ではなく、セレクターを:checkedとし、「チェックされているチェックボックス」にアクセスするようにしています。これも汎用性がある書き方かと。

続きの .next("input[type=text]")で、「(チェックされていない)チェックボックスの次に来るinputフォームを」と「チェックされているチェックボックスの次に来るinputフォームを」という風に指定しています。

色々な書き方が出来るのも、jQueryの魅力でも有りますね。

デモ

デモはこちらから
checkboxでdisabled制御 サンプル3

ラジオボタン版はこちら

ラジオボタン連動でテキストボックスの disabled を切り替えするスクリプトをjQueryで組んでみた

-Javascript,jQuery
-, , , , , ,