フロントエンドエンジニアになって早7ヶ月。
JavaScriptも書けるようになってきた松村です。
最初はJSに苦手意識もありましたが、今となっては自分で動かせるのが楽しいです。
そしてそして、楽しくなって、Google先生に聞けば何でも書けるぞ！！と調子に乗り始めた矢先、ラジオボタンに躓きました。。
作成したのは、formの中に2種類のラジオボタンがあるもの。
わあ、即席感がすごい。
これで何をしたいかというと、ラジオボタン未選択の時点では送信ボタンをdisabledで無効にして、両方のラジオボタンが選択されたら有効になるようにしたいのです。
そこで、私はこんなふうにJSを書きました。
$(‘input[name=radio]’).change(function(){
var change_flg = ‘true’;
$(this).parent(‘.form_inner’).addClass(‘change’);
$(‘.form_inner’).each(function(){
if(!$(this).hasClass(‘change’)){
change_flg = ‘false’;
}
});
if(change_flg === ‘true’){
$(‘.button input’).removeAttr(‘disabled’);
}
});
ラジオボタンが選択されたら、親のform_innerにchangeクラスをつけて、全てのform_innerにchangeがついていたら送信ボタンのdisabledをはずす。
なんだか動きそうな気がします。よしよし。
動きませんでした。
どこで止まっているのか見てみたところ、そもそもinputからchangeイベントが取れてないようです。なぜだ。Google先生もこれでいけるって言ってるのに。
onClickでも動いてくれません。なぜだー！
いろいろ試してみましたが、結局inputからイベントを取ってくることができず、form自体のChangeイベントでなんとかしました。
$(‘form’).change(function(){
var change_flg = ‘true’;
$(‘input:checked’).parent(‘.form_inner’).addClass(‘change’);
$(‘.form_inner’).each(function(){
if(!$(this).hasClass(‘change’)){
change_flg = ‘false’;
}
});
if(change_flg === ‘true’){
$(‘.button input’).removeAttr(‘disabled’);
}
});
これで動きました！
よかったよかった、でもなんで動かなかったんでしょう。。
原因が分かった方はコメントください！と言いたいところですが、このブログはコメント機能ないので私の心に直接語りかけていただけると幸いです。
よろしくお願いします。
ではでは。
