What is the jquery method for applying css to a disabled checkbox element?

Hey there! I'm trying to disable a checkbox first, and then add a CSS property. I've come up with the code below. The checkbox gets disabled, but unfortunately, the CSS property isn't added.

 $("input:radio,input:checkbox").each(
     function (nitem,obj){        
         if (labelTag[0].nodeName == 'LABEL'){
             labelTag.click(function(ev){
                 $(this).prev().checkboxradio('disable').css("color","red");
        });
    }
});

Here is the HTML code:

<div class="simple-checkbox chk">
     <input type="checkbox" id="billingaddress" class="radio">
         <label class="gray enableExpressCK" for="billingaddress">Enable Express Checkout</label>
 </div>

Check out the jsFiddle here

Answer №1

Check out this http://jsfiddle.net/k7hZ5/

$("input:radio,input:checkbox").change(function () {
    $(this)
        .prop('disabled', true)
        .next('label')
            .css('color', 'blue');
});

Answer №2

Just a slight modification:

$("input:radio,input:checkbox").change(function () {
    $(this)
        .attr('disabled', 'disabled')
        .next('label')
            .css('color', 'red');
});

Answer №3

Looks like your javascript is failing to execute:

A ReferenceError has occurred: labelTag is not defined when trying to access if (labelTag[0].nodeName == 'LABEL') {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ASP.NET MVC along with jQuery to delete an item from a select list

$('#remove').click(function() { var selectedItems = []; $('#FeatureLists :selected').each(function(i, selected) { selectedItems[i] = $(selected).text(); alert(selectedItems[i]); if (se ...

Tips for displaying or concealing the header on specific pages within an Angular application

I apologize for the vague nature of this inquiry. One of my classes is not providing clear instruction, leaving me confused about what I am attempting to ask. The app I am developing began with following an instructional guide in class. Essentially, I ins ...

Creating a blank grid using ng-repeat in angularJS

I'm attempting to create an empty grid using angularJS, but I've only been working with it for 2 days so I'm not very experienced. This is what I have come up with so far: <!doctype html> <html ng-app> <head> < ...

Show the total sum of a specific column in a datatable and enable the option to export the data to an Excel

When exporting a datatable as an Excel file with 4 columns, the third column contains product prices. After the export, I would like to see an additional row at the end of the table labeled "Total" that displays the sum of all values in column 3. I initia ...

An internal server error has occurred within the asp.net framework, resulting in

Seeking Solution: Currently, I am in the process of developing an application where I have implemented an HTML select list to choose a category. Using AJAX web method, I am trying to retrieve items and their respective images based on the selected category ...

Show a pop-up when hovering over each row of a Material UI table and address the problem with the box

Working on a react app using React v18.2 and Material UI V5, I successfully created a table with MUI Table component where I want to display a popover for each row when hovered over. To achieve this, I added a simple popover component to the last cell of ...

As the content scrolls, it covers the fixed background

I'm stumped on how to create this effect that seems like it should be simple. What I'm aiming for is similar to what can be seen here: On that website, when you begin scrolling the image remains in place while the content scrolls over it. Any s ...

Occasionally, data may fail to be fetched when using a Jquery GET

Here's what I've narrowed it down to: $.getJSON('/drinks/getColors', function(items) { colors = items; }); $.each(colors, function(index2, value2) { if (value.name == value2.name) { curColor = value2.color; } }); ...

How much time can pass between two clicks in order to activate a double-click event?

How long is the maximum delay between two clicks that will still activate a double-click event? Does this delay vary between plain JavaScript, jQuery, and AngularJS? Additionally, in jQuery, what time intervals do the fast and slow keywords represent? For ...

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...

Utilize a combination of two distinct font styles in TCPDF

Within the following code snippet, I am utilizing two fonts: "fruit" and "fruit bold." However, when I apply both fonts, the entire page appears in bold text. What I actually want is to use them selectively - for example, displaying "hello" in the "fruit ...

Pass an array from PHP to Javascript/jQuery using the .post method

Is there a way to convert the given GET request to a POST method in jQuery? $.post('chartHelperphp', { start: Math.round(e.min), end: Math.round(e.max), callback: '?', array_data: <?php echo json_encode($data); ?> ...

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

The jQuery tooltip fails to function properly after the AJAX content is loaded

I have been using a tooltip script that can be found at: This is the script I am using, with a few modifications: $(document).ready(function() { $("body").on("mouseover", ".tip_trigger", function(){ tip = $(this).find('.tip&apos ...

Tips for incorporating a card game into an HTML platform

Seeking guidance on creating a card-based game inspired by Game of Thrones, similar to yu-gi-oh. While experienced in Java, C, C++, I am new to HTML and its libraries. Any advice on which libraries or methods to utilize would be greatly appreciated. I aim ...

A guide on seamlessly transitioning from a mobile website to the corresponding native app

I am currently working on a mobile website project. This website is built using basic HTML and is accessed through a URL on a web browser, not as a native app or through PhoneGap. The client has requested links to their Facebook, Pinterest, YouTube, Twitt ...

The functionality of jQuery's show() method is not functioning correctly in the Google Chrome

My jQuery code is not functioning correctly. The HTML structure is as follows: <a href="">Some link</a> <br/> <a class="delete_file_initial" href="">Delete file</a> <span class="delete_file_question hide">are you sure ...

Troubleshooting issues with custom sorting in jQuery Tablesorter

I incorporated the Tablesorter library, which is based on jQuery, into my Django website. Faced with an issue, I am attempting to customize the sorting order of the "Pos" column in my table by utilizing the Parser function. Despite referencing multiple art ...

Parsing text files with Highcharts

As a beginner in JavaScript and HighCharts, I am facing a simple problem that has me completely lost. My goal is to generate a scatter chart with three lines by reading data from a text file formatted like this: x y1 y2 y3 1.02 1.00 6.70 ...

libxml2 - deleting a child node without affecting its grandchildren

I'm working with libxml2 to parse HTML content and need to remove specific formatting tags such as <center>, while retaining their content (e.g. a hyperlink). This requires removing particular child nodes from my xmlNodeSet, while preserving th ...