knowledge::short

例えば次のようなラジオボタンを含むフォームがあって、

<li><label>アイコン#1<input type="radio" name="icon" value="icon_001"></label></li>
<li><label>アイコン#2<input type="radio" name="icon" value="icon_002"></label></li>
<li><label>アイコン#3<input type="radio" name="icon" value="icon_003"></label></li>
<input name="post_comment" type="submit" />

ラジオボタンが選択されたらinput[name="post_comment"]に、class="ready"を付加する。

最初こんな風に組んだが、ラジオボタンの選択肢を変更すると、選択済みである事は変わらないのに、それがトリガーとなってreadyが付いたり消えたりする。

$('input[name="icon"]').on('change', function(){
    $('input[name="post_comment"]')
                    .toggleClass("ready", $('input[name="icon"]:checked').length );
});

で、一方で次の様に組むと通る。

$('input[name="icon"]').on('change', function(){
    $('input[name="post_comment"]')
    .toggleClass("ready",
        /\S/.test( $('input[name="icon"]:checked').val() )
    );
});

なんで？（?_?）まあ、原因はよく見ればあるのだろうけどね、、

関連するタグ

関連するタグは現在ありません。