読者です 読者をやめる 読者になる 読者になる

tohokuaikiのチラシの裏

技術的ネタとか。

Confluenceのプラグイン開発を承ります。ご連絡はこちらのホームページからお願いいたします。

jQueryで排他的なCheckbox

JavaScript

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

それならラジオボックス使えって話なのですが、ラジオは全部解除ができなくなってしまうからっていう。 (全部解除の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));

こんな感じで。