CODEWITHSUNDEEP
javascriptjquerycsscheckbox
Abdalla Arbab
Abdalla Arbab

Reputation: 1400

Add disable class to span if checkbox is disabled using jQuery

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");
});

Upvotes: 0

Views: 1102

Answers (2)

Rahul
Rahul

Reputation: 18557

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");
});

Upvotes: 1

Monzurul Shimul
Monzurul Shimul

Reputation: 8396

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

Upvotes: 1

Related Questions