なんでcheckboxにチェックが入ってるのにchangeイベントが発生しないの!?

jQueryでcheckcoxにチェックをつけた時に別のイベントを発生させたかったときがあり、いくらchangeイベントで発動させようとしても全く動いてくれない。
どうしたものか・・・ということが以前ありました。

jQueryを初めたての皆さんもそのような経験一度はあるのではないでしょうか?

<例えばこんなとき>
◆テーブルをクリックしたときにcheckboxにチェックをつけて、ひとつでもチェックがつけばボタンを活性化させたい。
※ひとつのイベントでも可能ですが、今回はあえてclickイベントとchangeイベントのふたつに分けています。

[html]

<table>
        <thead>
            <tr><th>クリックするとボタンが活性化するよ</th></tr>
        </thead>
        <tbody>
            <tr>
                <td><label for="apple"><input id="apple" type="checkbox">りんご</label></td>
            </tr>
            <tr>
                <td><label for="banana"><input id="banana" type="checkbox">バナナ</label></td>
            </tr>
            <tr>
                <td><label for="strawberry"><input id="strawberry" type="checkbox">いちご</label></td>
            </tr>
        </tbody>
    </table>
    <button type="button" disabled>決定</button>
[css]

table{
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid black;
    }
    th{
        background: #eae7e7;
    }

【jQuery失敗例】

[jQuery]
//テーブルをクリックするとチェックボックスにチェックが入る
$('tr').on('click',function() {
        if($(this).find('input[type="checkbox"]').prop('checked')){
            $(this).find('input[type="checkbox"]').prop('checked',false);
        } else {
           $(this).find('input[type="checkbox"]').prop('checked',true);
        }
    });

//チェックボックスにチェックが入ったらボタンが活性化
    $('input[type="checkbox"]').on('change',function(){
        if($('input[type="checkbox"]:checked').length > 0 ){
            $('button').attr('disabled',false);
        } else {
            $('button').attr('disabled',true);
        }

    });

こんな風に書いていくと思います。
しかしどんなにクリックしてもボタンが活性化してくれない。

そんな時に一度試してもらいたい方法

◯チェックを付ける処理に .change()もしくは.trigger('change')を入れる!

このどちらかを入れることによってチェックボックスにチェックが入ったときに”changeイベントを実行させる”ことができるようになります。

【jQuery成功例】

$('tr').on('click',function() {
        if($(this).find('input[type="checkbox"]').prop('checked')){
            $(this).find('input[type="checkbox"]').prop('checked',false).change();
        } else {
           $(this).find('input[type="checkbox"]').prop('checked',true).change();
        }
    });

    $('input[type="checkbox"]').on('change',function(){
        if($('input[type="checkbox"]:checked').length > 0 ){
            $('button').attr('disabled',false);
        } else {
            $('button').attr('disabled',true);
        }

    });

気付いてしまえばなんてことはないのですが、初心者は結構はまりやすいと思うので参考になれば嬉しいです!!

Shere
  • はてなブログ
  • Twitter
  • Facebook
jQueryでcheckboxにチェックをつけた時に別のイベントを発生させようとしたら動かない、そんな時に試して欲しいこと

Writer

  • Name

    堀 愛美

  • Position

    胃腸弱い系女子

  • Profile

    胃腸が大変弱い生き物です。 刺激の強い食べ物を欲しがりますが、与えてしまうと翌日悪魔が誕生します。大変危険ですのでご注意ください。