How to toggle properties using an ASP.NET checkbox and javascript?

Question

The following code sets a chosen property of one element and toggles that element when a checkboxs checked value is changed.

ASP.NET

<asp:CheckBox CssClass="Cb" RunAt="Server"/>
<asp:TextBox CssClass="Txt" RunAt="Server" ReadOnly="True"/>

HTML

<input class="Cb" type="checkbox"/>
<input class="Txt" type="text" readonly="true"/>

JQUERY

$(".Cb").change(function() {
    $(".Txt").prop("readonly",!this.checked);
});

WORKING EXAMPLE

http://jsfiddle.net/gKwbn/

A PROBLEM

When this code is executed with a ASP.NET asp:checkbox the result is not the same as when the code is executed with an input:checkbox.

With input:checkbox the readonly state toggles as:

INITIAL STATE

<input class="Txt" type="text" readonly="true"/>

TOGGLE

<input class="Txt" type="text"/>
<input class="Txt" type="text" readonly=""/>

With asp:checkbox the readonly state toggles as:

INITIAL STATE

<input class="Txt" type="text" readonly="readonly"/>

TOGGLE

<input class="Txt" type="text" readonly=""/>
<input class="Txt" type="text" readonly=""/>

UNDERSTANDING READONLY

All the following are properies are valid for readonly to be set to true.

readonly
readonly=""
readonly="true"
readonly="readonly"

MY QUESTIONS

How to remove and then toggle the readonly property when using asp.net with jquery/javascript?

EDITS

The problem is the class is applied to the incorrect element when using an asp:checkbox.

THIS

<asp:CheckBox CssClass="Cb" RunAt="Server"/>

RENDERS IN THE BROWSER AS

<span class="Cb"><input id="ctl01" type="checkbox" name="ctl01" /></span>

THE SOLUTION

Target the asp:checkbox using ID and not class.

<asp:CheckBox ID="CBID" CssClass="Cb" RunAt="Server"/>

$("#<%= CBID.ClientID %>").change(function() {
    $(".Txt").prop("readonly", this.checked ? "" : "readonly");
});

Reinstate Monica Cellio · Accepted Answer · 2013-10-01 10:33:22Z

3

If I'm not completely misunderstanding your question, you can use this instead...

$(".Cb").change(function() {
    $(".Txt").prop("readonly", this.checked ? "" : "readonly");
});

That will set the readonly property to either readonly or empty, depending on the checkbox state.

Here's a working fiddle

Edit: Further to your update, you can either add the class to the checkbox like this...

<asp:CheckBox class="Cb" RunAt="Server"/>

or you can refer to it by ID...

$("#ctl01").change(function()...

or by name...

$("input[name=ctl01]").change(function()...

or by the fact that it's in the span...

$(".Cb input:checkbox").change(function()...

edited Oct 1, 2013 at 10:33

answered Oct 1, 2013 at 9:53

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DreamTeK Over a year ago

Thanks for your quick response Archer. Your code is correct but again does not work when applied to an asp:checkbox.

Reinstate Monica Cellio Over a year ago

There must be something else amiss here as I've just done it with an ASP.Net checkbox and it does work. It's still just a checkbox when the page is rendered. What makes you say it doesn't work - what is actually going wrong?

Reinstate Monica Cellio Over a year ago

You've added the class Cb to the checkbox's containing span, not the checkbox itself. Put that on the checkbox instead and it should fix your problem :)

DreamTeK Over a year ago

Aha you spotted the issue. It does not however solve my problem. Please see my edits at above.

DreamTeK Over a year ago

Many Thanks Archer. I have edited my question to accomodate the answer. I targeted the checkbox by ID instead of class.

|

Collectives™ on Stack Overflow

How to toggle properties using an ASP.NET checkbox and javascript?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related