- ベストアンサー
ラジオボタンが選択された項目のみ操作可能
ラジオボタンが選択された項目のみ操作できるようにしたいです。 小学校が選択されたら 小学校のチェックボックスとボタンはenable 中学校のチェックボックスとボタンはdisabled？readonly？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF() { fOBJ = document.myFORM; RadioNum = 2; // ラジオボタンの数 for (i=0; i<RadioNum; i++) { if (fOBJ["mm"][i].checked) fOBJ["aa"+i].disabled = false; else fOBJ["bb"+i].disabled = true; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form name="myFORM"> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF()">小学校</td> <td><input type="radio" name="mm" onClick="setRTF()">中学校</td> </tr> <tr> <td> <input type="checkbox" name="aa[]" value="1" />Ａ小学校<br/> <input type="checkbox" name="aa[]" value="2" />Ｂ小学校<br/> <input type="checkbox" name="aa[]" value="3" />Ｃ小学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <input type="checkbox" name="bb[]" value="1" />Ａ中学校<br/> <input type="checkbox" name="bb[]" value="2" />Ｂ中学校<br/> <input type="checkbox" name="bb[]" value="3" />Ｃ中学校<br/> <input type="button" value="全選択" onClick="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>
- pos_pos
- お礼率17% (7/39)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
じゃ、tdにidを振ってみては？ <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'cc')">高校</td> </tr> <tr> <td id="aa"> <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="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb"> <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="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc"> <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="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
ていせいします <input ～/> のすらっしゅは、つけちゃだめだった。
- babu_baboo
- ベストアンサー率51% (268/525)
HTMLをすっきりさせたら、すくりぷとがながくなってしまった。^^; そのうち、ちゃんとかいとうがつくでしょう～！ ばぶぅ～ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>sample</title> <form> <table border="1"> <tr> <td><input type="radio" name="mm">小学校</td> <td><input type="radio" name="mm">中学校</td> <td><input type="radio" name="mm">高校</td> </tr> <tr> <td> <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="全選択"><br> <input type="button" value="全解除"> </td> <td> <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="全選択"><br> <input type="button" value="全解除"> </td> <td> <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="全選択"><br> <input type="button" value="全解除"> </td> </tr> </table> </form> <script type="text/javascript"> //@cc_on document./*@if (@_jscript) attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 'click', function (evt) { var e = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/; var inp, f, b, c, n, o, tbl, tr, td; if ('INPUT' === e.nodeName && 'button' === e.type) { if ('全選択' === e.value) f = true; if ('全解除' === e.value) f = false; if (undefined !== f) { inp = e.parentNode.getElementsByTagName('input'); for (c = 0; o = inp[c]; c++) if ('checkbox' === o.type) o.checked = f; } } if ('mm' === e.name) { tbl = getParent(e, 'nodeName', 'TABLE'); tr = getParent(e, 'nodeName', 'TR'); td = getParent(e, 'nodeName', 'TD').cellIndex; tr = tbl.rows[tr.rowIndex + 1]; for (b = 0; n = tr.cells[b]; b++) { inp = n.getElementsByTagName('input'); for (c = 0; o = inp[c]; c++) o.disabled = b != td; } } }, false); function getParent (node, type, val) { return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } document.getElementsByName('mm')[0].click(); </script>
- fujillin
- ベストアンサー率61% (1594/2576)
横からですが… せっかく ＞if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=f[i].name!=n; まで考えたのならば、その後半でどのようにしてdisabled属性がセットされているのかまでを理解しておきましょう。 f[i].disabled = ( f[i].name != n ) ; は、そのエレメント（=f[i]）のname属性が、引数で渡された名前（=ラジオボタンから指定された名前）と同じだったら disabled = false に、そうでなければ disabled = true となるようになっています。 一方、現状のボタンにはname属性が設定されていませんので、どのボタンの場合でも名前が一致することありません。 その結果、常に値はfalseとなって操作可能にセットされていることになります。 なので、そのスクリプトで動作するようにするには、ボタンにも・・・・ ついでに、現状は初期状態で全部のボタンが操作可能になっていますから、それも・・・・ で、うまくいくと思います。
- yambejp
- ベストアンサー率51% (3827/7415)
前回とちがいラジオボタンとチェックボックスの構造的なつながりが 薄いので、名前を指定してやるのが限界でしょうか・・・ <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ if(f[i].type=="checkbox") f[i].disabled=f[i].name!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1"> <tr> <td><input type="radio" name="mm" onClick="setRTF(this.form,'aa[]')">小学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'bb[]')">中学校</td> <td><input type="radio" name="mm" onClick="setRTF(this.form,'cc[]')">高校</td> </tr> <tr> <td> <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="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <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="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> <td> <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="allcheck(this,true)"/><br> <input type="button" value="全解除" onClick="allcheck(this,false)"/> </td> </tr> </table> </form> </body> </html>
補足
yambejpさんへ ボタンも操作不可にできますか？ if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=f[i].name!=n; こんなふうにやってみましたが... よろしくお願いします。
補足
お世話になります。 ボタンのNAMEの付け方がよくわかりません。 下記のような感じでやってみましたがダメでした... <input type="button" name = "btn[0]" value="全選択" disabled onClick="allcheck(this,true)"/><br> <input type="button" name = "btn[1]" value="全解除" disabled onClick="allcheck(this,false)"/> よろしくお願いします。