Add disable class to span if checkbox is disabled using jQuery

Question

I have this checkbox code

<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>

And i want to add class disabled to checkbox-lable-sm class if the checkbox is disabled using jquery

css

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

I have tried this code but it is not working

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

I'm confused, you say "Add class for label" but your code shows your trying to add it to the span ? — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Feb 7, 2017 at 11:05

Monzurul Shimul · Accepted Answer · 2017-02-07 11:12:47Z

1

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

answered Feb 7, 2017 at 11:12

Monzurul Shimul

8,4262 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul · Accepted Answer · 2017-02-07 11:13:10Z

1

Give it a try to this,

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

I am sure this will work.

Here is working jsfiddle

Here is second way,

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

Here is third way,

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

edited Feb 7, 2017 at 11:13

answered Feb 7, 2017 at 11:04

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

Collectives™ on Stack Overflow

Add disable class to span if checkbox is disabled using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related