- ベストアンサー
チェックボタンの制御方法
- チェックボタンの制御方法について紹介します。学校の選択に応じてチェックボタンの制御を行い、ボタンの状態も制御する方法です。
- 具体的な制御方法は以下の通りです。 (1)【全ての学校】選択時は、【小学校】と【中学校】のチェックボタンをdisabledのままにし、ボタンもdisabledにします。 (2)【小学校】選択時は、【中学校】のチェックボタンをdisabledのままにし、ボタンもdisabledにします。 (3)【中学校】選択時は、【小学校】のチェックボタンをdisabledのままにし、ボタンもdisabledにします。
- 上記のように、学校の選択に応じてチェックボタンとボタンの制御を行うことができます。実装方法はJavaScriptを使用しています。ただし、うまく制御できない場合もあるので注意が必要です。
- pos_pos
- お礼率17% (7/39)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
じこりゅうをおしとおすのも、すてきですが こういうかんがえかたもありますよ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="eSchool.on(); hSchool.off(); hSchool.reset();">小学校</td> <td width="90"><input type="radio" name="mm" onClick="eSchool.off(); eSchool.reset(); hSchool.on()">中学校</td> <td width="102"><input type="radio" name="mm" onClick="allSchool.off(); allSchool.check()">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="eSchool.check()"/ disabled ><br> <input type="button" value="全解除" onClick="eSchool.reset()" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="hSchool1.check()" disabled /><br> <input type="button" value="全解除" onClick="hSchool1.reset()" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="dd" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="hSchool2.check()" disabled /><br> <input type="button" value="全解除" onClick="hSchool2.reset()" disabled /> </td> </tr> </table> </form> <script type="text/javascript"><!-- var Group = function ( parent ) { if( parent ) { var prnt = document.getElementById( parent ); this.list = prnt.getElementsByTagName( 'INPUT' ); } else { this.list = [ ]; } this.on = function () { for( var cnt = 0, o; o = this.list[ cnt++ ]; ) o.disabled = false; }; this.off = function () { for( var cnt = 0, o; o = this.list[ cnt++ ]; ) o.disabled = true; }; this.reset = function () { for( var cnt = 0, o; o = this.list[ cnt++ ]; ) if( 'checkbox' == o.type ) o.checked = false; }; this.check = function () { for( var cnt = 0, o; o = this.list[ cnt++ ]; ) if( 'checkbox' == o.type ) o.checked = true; }; this.add = function ( group ) { for( var cnt = 0, o; o = group.list[ cnt++ ]; ) this.list.push( o ); }; }; var eSchool = new Group( 'aa' ); var hSchool1 = new Group( 'bb' ); var hSchool2 = new Group( 'dd' ); var hSchool = new Group( ); hSchool.add( hSchool1 ); hSchool.add( hSchool2 ); var allSchool = new Group(); allSchool.add( eSchool ); allSchool.add( hSchool ); var hScool = new Group( 'aa' ); // --></script> </body> </html>
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
function input_check() { if ((document.form1.mm[0].checked == "") && (document.form1.mm[1].checked == "") && (document.form1.mm[2].checked == "")){ alert("対象学校選択してください。"); return(false); } } これなんだけどね http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#radio には、 「著者は各ラジオボタン群につき1つの初期値を確実に“on”にしておく必要がある。」 というもんごんがあるじょ。 なので、 <input type="radio" ～ checked>としておけば このるーちん、そのものがいらないのでは？ つぎは onsubmit さんしょうかな。
- babu_baboo
- ベストアンサー率51% (268/525)
disabledにしたら、なにもそうしんされないらしいよ。 なのでそうしんするてまえで、ぜんかいじょするか。 なにもそうしんされなかったら、うけがわで、ぜんぶそうしんしたと りかいするか 「全ての学校」radioの、あたいをさんしょうするとか・・・。
- babu_baboo
- ベストアンサー率51% (268/525)
ごめん！ いちばんしたの var hScool = new Group( 'aa' ); は、ごみです。けしてください
補足
お世話になります。ありがとうございます。 自分なりにアレンジしてみました。 【全ての学校】からの移動の際に移動先のチェックをクリアと 入力チェックするように変更しました。 ※ご相談ですが【全ての学校】を選択時 （他のチェックを操作出来ないようにdisabledにしている） ＰＯＳＴ時にこの値が反映されないようです。 このような場合どのように処理すればよろしいのでしょうか？ ご存知でしたらアドバイス頂きたいのですがよろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="application/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>TEST</title> <body> <form name="form1" action="next_page.php" method="post" onSubmit="return input_check()"> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" value ="1" onClick="eSchool.on(); hSchool.off(); eSchool.reset(); hSchool.reset()">小学校</td> <td width="90"><input type="radio" name="mm" value ="2" onClick="eSchool.off(); eSchool.reset(); hSchool.on(); hSchool.reset()">中学校</td> <td width="102"><input type="radio" name="mm" value ="3" onClick="allSchool.off(); allSchool.check()">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="eSchool.check()"/ disabled ><br> <input type="button" value="全解除" onClick="eSchool.reset()" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="hSchool1.check()" disabled /><br> <input type="button" value="全解除" onClick="hSchool1.reset()" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="dd" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="hSchool2.check()" disabled /><br> <input type="button" value="全解除" onClick="hSchool2.reset()" disabled /> </td> </tr> </table> <input type="submit" name="confirm" value="確認"> </form> <script type="text/javascript"><!-- var Group = function ( parent ) { if( parent ) { var prnt = document.getElementById( parent ); this.list = prnt.getElementsByTagName( 'INPUT' ); } else { this.list = [ ]; } this.on = function () { for( var cnt = 0, o; o = this.list[ cnt++ ]; ) o.disabled = false; }; ・ ・ ・ function input_check() { if ((document.form1.mm[0].checked == "") && (document.form1.mm[1].checked == "") && (document.form1.mm[2].checked == "")){ alert("対象学校選択してください。"); return(false); } } // --></script> </body> </html>