CODEWITHSUNDEEP
jqueryasp.net.netvb.netvisual-studio-2015
stonypaul
stonypaul

Reputation: 677

Disabling the Text property of a Checkbox control using jQuery

I am able to disable a Checkbox based on a dropdown value no problem but the text stays bold. Is there a way to get to this and disable it and "gray" it out? This question is not a duplicate.

<td><asp:CheckBox id="cb1" ClientIDMode="Static" runat="server" Text="Some Text" /></td>

function ddlChanged() {
        var enable = !($("#ddlTestsCancelled").val() == 1);
        EnableCheckBoxes(enable, $("#cb1"));
    }

function EnableCheckBoxes(enable, chk) {              
        chk.prop("disabled", enable);          
        chk.prop("checked", false);           
    }

Upvotes: 0

Views: 226

Answers (2)

Sunil
Sunil

Reputation: 21406

What you can do is get the label element for the checkbox since ASP.Net shows the Text of a checkbox as a label element, and then change it's CSS color attribute to gray.

function EnableCheckBoxes(enable, chk) {              
        chk.prop("disabled", enable);          
        chk.prop("checked", false);    
        if(enabled === true) {
           $("label[for='<%=cb1.ClientID%>']").css("color", "black");
         }  else  {
        $("label[for='<%=cb1.ClientID%>']").css("color", "gray")
        }    
    }

Also, to simulate a disabled effect, you can set the opacity to something like .5 instead of changing the color attribute, and then reset it to 1 when checkbox is enabled. The code for this is as given below.

function EnableCheckBoxes(enable, chk) {              
        chk.prop("disabled", enable);          
        chk.prop("checked", false);    
        if(enabled === true) {
           $("label[for='<%=cb1.ClientID%>']").css("opacity", 1);
         }  else  {
        $("label[for='<%=cb1.ClientID%>']").css("opacity", .5)
        }    
    }

If you want to use the chk rather than the getting the ClientId of checkbox, then use the below version of same method.

function EnableCheckBoxes(enable, chk) {              
        chk.prop("disabled", enable);          
        chk.prop("checked", false);    
        if(enabled === true) {
           $("label[for='" + chk[0].id + "']").css("opacity", 1);
         }  else  {
         $("label[for='" + chk[0].id + "']").css("opacity", .5)
        }    
    }

Upvotes: 2

Chase
Chase

Reputation: 944

If you want to un-bold and gray out the text of an HTML element, you can use jquery's css() method to dynamically apply styling as follows:

$("#cb1").css("font-weight", "normal");
$("#cb1").css("color", "gray");

Upvotes: 0

Related Questions