tohokuaikiのチラシの裏

技術的ネタとか。

jQueryで排他的なCheckbox

一つチェックボックスしたら他のはチェックさせたくないってありますよね。

それならラジオボックス使えって話なのですが、ラジオは全部解除ができなくなってしまうからっていう。 (全部解除のUIってわかりにくいでしょ)

ということで、

<p rel="reserve">
<input type="checkbox" value="1">選択肢1
<input type="checkbox" value="1">選択肢2
</p>

に対して

jQuery((function($){
    return function(){
        var chks = $('p[rel="reserve"] input');
        chks.on('change firsttrigger', function(e) {
            var checked = chks.filter(':checked');
            if (checked.length == 0){
                chks.prop('disabled', false);
            }
            else {
                chks.each(function(i, chk){
                    $(chk).prop('disabled', chk != checked.get(0));
                });
            }
        }).trigger('firsttrigger');
    };
})(jQuery));

こんな感じで。