下記のようなラジオボタンに連動するチェックボックスがあります。
ラジオボタンは「血液がありますか?」という問いに対する「はい」「いいえ」です。
チェックボックスの中身はA型B型など血液型の選択肢です。
「血液がありますか?」 という問いに対し当初は「いいえ(radio) checked」となっており、この状態では血液型のチェックボックスが選択できません。
これを「はい(radio)」とすると血液型のチェックボックスが選択できるようになります。
javascript
1<script> 2function rCheck(chkID) { 3 var array = ['r_btnA', 'r_btnB', 'r_btnO', 'r_btnAB']; 4 for (kay in array){ 5 var r_btn = document.getElementById(array[kay]); 6 if(chkID == '0'){ 7 r_btn.setAttribute('disabled', 'disabled'); 8 r_btn.checked = false; 9 } else { 10 r_btn.removeAttribute('disabled'); 11 } 12 } 13 14} 15window.onload = function(){ 16 var array = ['in_yesno1', 'in_yesno2']; 17 var ynFlag = '1'; 18 19 var array2 = ['in_yesno2', 'in_yesno1']; 20 var ynFlag2 = '0'; 21 22 for (kay in array){ 23 var r_btn = document.getElementById(array[kay]); 24 if(r_btn.checked){ 25 ynFlag = r_btn.getAttribute('value'); 26 break; 27 } 28 } 29 rCheck(ynFlag); 30}; 31 32</script> 33 34 35 36 <p>血液はありますか?</p> 37 <form action="xxxxxx" method="post" name="frm_yesno"> 38 <div><input type="radio" id="in_yesno1" name="q[1]" value="1" onclick="rCheck('1')">はい</div> 39 <div><input type="radio" id="in_yesno2" name="q[1]" value="0" onclick="rCheck('0')" checked>いいえ</div> 40 </form> 41 42 </section> 43 <section class="btn_area"> 44 <p>では何型ですか?</p> 45 <form action="xxxxxx" method="post"> 46 <div><input type="checkbox" name="type_blood" id="r_btnA" value="a">A型</div> 47 <div><input type="checkbox" name="type_blood" id="r_btnB" value="b">B型</div> 48 <div><input type="checkbox" name="type_blood" id="r_btnO" value="o">O型</div> 49 <div><input type="checkbox" name="type_blood" id="r_btnAB" value="ab">AB型</div> 50 </form> 51 52
これを改造して下記のようにしたいと思います。
チェックボックスの選択枝に血液型に加え、「私は幽霊です」「私はロボットです」を付け加えます。
「当初の血液がありますか?→いいえ(radio) checked」の状態では、「血液型(A型B型..)のチェックボックスがdisabled」となっている代わりに「私は幽霊です」「私はロボットです」のチェックボックスが選択できます。
血液がありますか?→「はい(radio)」にラジオボタンを変更すると、「私は幽霊です」「私はロボットです」のチェックボックスがdisabled」となり、血液型(A型B型..)のチェックボックスが選択できるようになります。
【出来なかったこと】
下記のように改造してみましたがうまくいきません。
当初の血液型のdisabledは機能していますが、ラジオボタンを変更したときに、幽霊ロボットのdisabledが機能しません。
どのように改造すればいいかご教示願います。
javascript
1<script> 2function rCheck(chkID) { 3 var array = ['r_btnA', 'r_btnB', 'r_btnO', 'r_btnAB']; 4 for (kay in array){ 5 var r_btn = document.getElementById(array[kay]); 6 if(chkID == '0'){ 7 r_btn.setAttribute('disabled', 'disabled'); 8 r_btn.checked = false; 9 } else { 10 r_btn.removeAttribute('disabled'); 11 } 12 } 13 14 var array2 = ['r_btnF', 'r_btnG']; 15 for (kay2 in array2){ 16 var r_btn2 = document.getElementById(array2[kay2]); 17 if(chkID2 == '1'){ 18 r_btn2.setAttribute('disabled', 'disabled'); 19 r_btn2.checked = false; 20 } else { 21 r_btn2.removeAttribute('disabled'); 22 } 23 } 24 25} 26window.onload = function(){ 27 var array = ['in_yesno1', 'in_yesno2']; 28 var ynFlag = '1'; 29 30 var array2 = ['in_yesno2', 'in_yesno1']; 31 var ynFlag2 = '0'; 32 33 for (kay in array){ 34 var r_btn = document.getElementById(array[kay]); 35 if(r_btn.checked){ 36 ynFlag = r_btn.getAttribute('value'); 37 break; 38 } 39 40 var r_btn2 = document.getElementById(array[kay]); 41 if(r_btn2.checked){ 42 ynFlag2 = r_btn2.getAttribute('value'); 43 break; 44 } 45 46 } 47 rCheck(ynFlag); 48 49 50}; 51 52</script> 53 54 55 <p>血液はありますか?</p> 56 <form action="xxxxxx" method="post" name="frm_yesno"> 57 <div><input type="radio" id="in_yesno1" name="q[1]" value="1" onclick="rCheck('1')">はい</div> 58 <div><input type="radio" id="in_yesno2" name="q[1]" value="0" onclick="rCheck('0')" checked>いいえ</div> 59 </form> 60 61 </section> 62 <section class="btn_area"> 63 <p>では何型ですか?</p> 64 <form action="xxxxxx" method="post"> 65 <div><input type="checkbox" name="type_blood" id="r_btnA" value="a">A型</div> 66 <div><input type="checkbox" name="type_blood" id="r_btnB" value="b">B型</div> 67 <div><input type="checkbox" name="type_blood" id="r_btnO" value="o">O型</div> 68 <div><input type="checkbox" name="type_blood" id="r_btnAB" value="ab">AB型</div> 69 <div><input type="checkbox" name="type_blood" id="r_btnF" value="f">私は幽霊です</div> 70 <div><input type="checkbox" name="type_blood" id="r_btnG" value="g">私はロボットです</div> 71 72 </form> 73 74
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/13 08:38