Disable cursor:pointer for labels of disabled checkboxes

Question

I am trying to have cursor:pointer on my checkboxes and their labels.

Here's the code that I use - but I want to avoid having cursor:pointer on checkboxes and their labels that are disabled.

HTML looks like this:

<label>
    <input 
        type="checkbox"
        ...more attributes...
        > Yes, please specify:
</label>

CSS:

input[type=checkbox]:not([disabled]), 
label + input[type=checkbox]:not([disabled]) {
    cursor: pointer;
}

The way I set it as disabled is using jQuery:

$("selector").prop("disabled", true);
$("selector").prop("disabled", false);

It seems I can't find a way to select <label> that contains a disabled checkbox.

Ideas?

Thank you.

Someone kindly provided a codepen for testing: http://codepen.io/8odoros/pen/BQVQGg

Answer 1

I Don't know exactly what you need , is my understanding is right you need this

$('button').click(function(){
var i = $('input');
    
    if ( i.is('[disabled]') ){
        i.attr('disabled',false)
    }else{
         i.attr('disabled',true);
    }
})

input[type=checkbox][disabled]{
  cursor:default;
}
input[type=checkbox]:not([disabled]) +label {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="checkbox" value="tasd" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>

<input  type="checkbox" />
<label> This is enabled (pointer cursor)</label>
</br>
<input  type="checkbox"  disabled/> 
<label>This is disabled (default cursor)</label>