Posted at

jQueryでshow/hide, addClass/removeClass, disabledの切り替えを一行で書く

More than 3 years have passed since last update.

例えば、表示するとかいうチェックボックスがあったとして

    $("#checkbox").on("click", function() {

if ($(this).prop("checked")) {
$('#div').show();
$('#div').addClass("show");
$('#div input').prop("disabled", false);
} else {
$('#div').hide();
$('#div').removeClass("show");
$('#div input').prop("disabled", true);
}
}

チェックするとこんな動きをするとしよう


  • DIVを表示

  • DIVに特定のクラスをつける

  • DIV内のinput要素のdisabledを解除する

チェックを外した場合は、上記の逆の処理

こんな処理たちをひたすら一行で書く


show / hide

    if ($(this).prop("checked")) {

$('#div').show();
} else {
$('#div').hide();
}

    $('#div').toggle($(this).prop("checked"));


addClass / removeClass

    if ($(this).prop("checked")) {

$('#div').addClass("show");
} else {
$('#div').removeClass("show");
}

    $('#div').toggleClass("show", $(this).prop("checked"));


add or removeするクラスが二つの場合(おまけ)

http://qiita.com/nmta/items/5ba589cb8991d93bd5bb


disabled

    if ($(this).prop("checked")) {

$('#div input').prop("disabled", false);
} else {
$('#div input').prop("disabled", true);
}

    $('#div input').prop("disabled", !$(this).prop("checked"));

!を忘れずに


まとめて

    $("#checkbox").on("click", function() {

$('#div').toggle($(this).prop("checked"));
$('#div').toggleClass("show", $(this).prop("checked"));
$('#div input').prop("disabled", !$(this).prop("checked"));
});

    $("#checkbox").on("click", function() {

var checked = $(this).prop("checked");
$('#div').toggle(checked).toggleClass("show", checked)
.find("input").prop("disabled", !checked);
});