Turn off cursor:pointer for disabled checkbox labels

Question

Turn off cursor:pointer for disabled checkbox labels

Is there a way to apply the cursor:pointer style to checkboxes and their labels, but only for those that are not disabled?

This is the code snippet I am currently using:

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

In my CSS, I have the following rule:

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

To disable a checkbox, I use jQuery like this:

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

I'm facing an issue with targeting the <label> element that contains a disabled checkbox. Any suggestions on how to accomplish this?

Thank you for your input.

You can test a code example provided by someone here: http://codepen.io/8odoros/pen/BQVQGg

jquery html css checkbox css-selectors

Answer 1

Answer №1

It appears that you are in need of a solution, and based on my understanding, this code snippet may be helpful:

$('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>

Answer 2

It appears that you are in need of a solution, and based on my understanding, this code snippet may be helpful:

$('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>

Answer 3

Answer №2

It's not possible to target the parent element (the label) using CSS alone. However, by rearranging the structure and placing the labels after the inputs, you can utilize the Adjacent sibling selector + in this way:

$("#active").prop("disabled", false);
$("#inactive").prop("disabled", true);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  type="checkbox" id="active"/>
<label> This is enabled (pointer cursor)</label>
</br>
<input  type="checkbox" id="inactive"/>
<label>This is disabled (default cursor)</label>

Answer 4

It's not possible to target the parent element (the label) using CSS alone. However, by rearranging the structure and placing the labels after the inputs, you can utilize the Adjacent sibling selector + in this way:

$("#active").prop("disabled", false);
$("#inactive").prop("disabled", true);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  type="checkbox" id="active"/>
<label> This is enabled (pointer cursor)</label>
</br>
<input  type="checkbox" id="inactive"/>
<label>This is disabled (default cursor)</label>

Turn off cursor:pointer for disabled checkbox labels

Answer №1

Answer №2

Similar questions

Determine how the scale of a transform changes over time by calculating the function of elapsed time [ transform: scale(x, y

Deactivate a function within Bootstrap JavaScript

A guide to exporting a PDF in A4 size landscape mode with jspdf

Tips on maintaining the parent's scope in CoffeeScript while making an AJAX call

Is it possible to maintain consistent numbering for ordered lists using only CSS, even when the lists are separate from each other?

How can I assign the output of a function to a variable within a class in Angular?

Trouble with the jQuery sliding animation speed

Customized height for vertical Slick slider based on content length

A guide on cropping and uploading images using ejs and Node.JS

The onload function on the iframe is triggering twice in Internet Explorer 11

Is there a way to stop the dropdown from automatically appearing in a DropDownList?

Instructions on inputting a keyword in the search bar and clicking the search icon on the YouTube homepage with Selenium Python

Save information in a session using html and javascript

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

The layout is being disrupted by a bug in the nested list div in IE 7

The correlation between dynamic pricing and surge pricing in relation to PX

Attempting to execute an SQL query in order to populate a dropdown menu by utilizing AJAX technology

Is it possible to process HTML and JavaScript as a request in JMeter?

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Is it possible to showcase two modals on a single page, positioning one to the left and the other to the right using Bootstrap?