Question

我有这个复选框代码

<div class="checkbox-group">

    <label class="fc-contain-sm checkbox-status">
        <input type="checkbox" class="formjs-checkbox-sm" checked disabled>
        <div class="fc-status-sm"></div>
        <span class="checkbox-lable-sm">Disabled checkbox</span>
    </label>

    <label class="fc-contain-sm checkbox-status">
        <input type="checkbox" class="formjs-checkbox-sm">
        <div class="fc-status-sm"></div>
        <span class="checkbox-lable-sm">Normal checkbox</span>
    </label>

</div>

如果使用jquery禁用该复选框，我想将disabled类添加到checkbox-lable-sm类

css

.checkbox-group .disabled {
  cursor: not-allowed;
}

我已尝试过此代码，但无效

$('.checkbox-group > input:disabled.formjs-checkbox-sm').each(function(){
    $(this).find('.checkbox-lable-sm').addBack().addClass("disabled");
});

Answer 1

尝试一下，

$(".checkbox-group input[type='checkbox']").each(function() {
  if ($(this).is(':disabled')) {
    $(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
  }
});

我相信这会奏效。

这是有效的jsfiddle

这是第二种方式，

$(".checkbox-group input[type='checkbox']:disabled").each(function() {
  $(this).closest(".fc-contain-sm").find(".checkbox-lable-sm").addClass("disabled");
});

这是第三种方式，

$(".checkbox-group input[type='checkbox']:disabled").each(function() {
  $(this).closest("label").find(".checkbox-lable-sm").addClass("disabled");
});

Answer 2

$('.checkbox-group input:disabled.formjs-checkbox-sm').each(function() {
    $(this).parent().find('.checkbox-lable-sm').addClass("disabled");
});

如果使用jQuery禁用复选框，则将禁用类添加到span

2 个答案: