Disable cursor:pointer for labels of disabled checkboxes
<p>I am trying to have <code>cursor:pointer</code> on my checkboxes and their labels. </p>

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

<p>HTML looks like this: </p>

<pre><code>&lt;label&gt;
    &lt;input 
        type="checkbox"
        ...more attributes...
        &gt; Yes, please specify:
&lt;/label&gt;
</code></pre>

<p>CSS: </p>

<pre><code>input[type=checkbox]:not([disabled]), 
label + input[type=checkbox]:not([disabled]) {
    cursor: pointer;
}
</code></pre>

<p>The way I set it as disabled is using jQuery: </p>

<pre><code>$("selector").prop("disabled", true);
$("selector").prop("disabled", false);
</code></pre>

<p>It seems I can't find a way to select <code>&lt;label&gt;</code> that contains a disabled checkbox. </p>

<p>Ideas?</p>

<p>Thank you.</p>

<p>Someone kindly provided a codepen for testing: <a href="http://codepen.io/8odoros/pen/BQVQGg" rel="nofollow noreferrer">http://codepen.io/8odoros/pen/BQVQGg</a></p>