Checkbox and click event handling

Question

I'm trying to set a textbox to 'readonly', add a class, and put a text into the textbox at that moment when I check the checkbox. Moreover, I'm also trying to remove 'readonly' attribute from the textbox, add a class, and delete text in the textbox.

I have

$('#CheckBoxSectionCode').click(function () {
    if ($(this).is(':checked')) {
        $('#TextBoxSectionCode').attr('readonly', 'readonly');
        $('#TextBoxSectionCode').addClass('disabled');
        $('#TextBoxSectionCode').text(document.getElementById('TextBoxSectionName').val);
        }
    else {
        $('#TextBoxSectionCode').attr('readonly', false);
        $('#TextBoxSectionCode').addClass('abled');
        $('#TextBoxSectionCode').text('');
    }
});

This code doesn't work for me.

Thanks,

Phillip

Thanks everyone for answers.

According to your comments and answers, I've changed my code but it's still not working.

$('#CheckBoxSectionCode').click(function () {
    if ($(this).is(':checked')) {
        $('#TextBoxSectionCode').prop('readonly', true);
        $('#TextBoxSectionCode').addClass('disabled');
        $('#TextBoxSectionCode').text('disabled');

    }
    else {
        $('#TextBoxSectionCode').prop('readonly', false);
        $('#TextBoxSectionCode').removeClass('disabled').addClass('enabled');
        $('#TextBoxSectionCode').text('');
    }
});

I'm using chrome browser to run this code, and using developer tools in chrome and put a break point at the code above to see what's happening in the jquery. However, when I click the check box to check/uncheck, nothing happens there.

Just to clarify; when @SterlingArcher says caching the jQuery object, she/he means doing something like var obj = $('#TextBoxSectionCode') then calling the functions using the variable like this: obj.attr(...); obj.addClass(...). Every time you do a $(something) you are calling a function in jQuery that looks for the DOM. — Archy Will He
– Archy Will He, Commented Apr 6, 2015 at 19:42
@SterlingArcher No problem. I think your comment is quite solid. You should make it into an answer :) — Archy Will He
– Archy Will He, Commented Apr 6, 2015 at 19:43
@PhillipHG and it's better to use prop('readonly', true/false) over attr() - api.jquery.com/prop just my two cents — Indy
– Indy, Commented Apr 6, 2015 at 19:47

Sterling Archer · Accepted Answer · 2015-04-06 19:44:59Z

1

document.getElementById('TextBoxSectionName').val this is wrong. You really should cache your jQuery object so it's not navigating the DOM over and over. Then you mix in native JS and .val is not a DOM property or method, nor is it a jQuery property, it should be .value for a DOM object or .val() for a jQuery object.

Obligatory explanation by @Archy Wilhes:

"Just to clarify; when @SterlingArcher says caching the jQuery object, she/he means doing something like var obj = $('#TextBoxSectionCode') then calling the functions using the variable like this: obj.attr(...); obj.addClass(...). Every time you do a $(something) you are calling a function in jQuery that looks for the DOM."

answered Apr 6, 2015 at 19:44

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

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

1 Comment

Katana314 Over a year ago

Very good explanation. My own addition, just so it doesn't sound poisonous to try mixing JQuery and native JS: document.getElementById will return an actual HTMLElement. $("#idIsHere") will return a JQuery object; which, on a basic level, is an array containing any number, but usually one, HTMLElement. It also has ten billion helper functions on it to perform various operations on every HTMLElement inside of it. You can retrieve the native element with jqObj[0], and you can create a JQuery object with $(myHtmlElementVar) (no quotes in the call).

Touhid Alam · Accepted Answer · 2015-04-06 19:46:52Z

0

since everytime you are adding the class the element is going to end up having both the two classes. Consider removing the other class before adding one. For example,

$(selector).removeClass('disabled').addClass('enabled')

answered Apr 6, 2015 at 19:46

Touhid Alam

3431 silver badge5 bronze badges

Comments

pregoli · Accepted Answer · 2015-04-06 19:54:12Z

0

Try with change event instead of click:

    $('#CheckBoxSectionCode').change(function () {
        if ($(this).is(':checked')) {
        $('#TextBoxSectionCode').attr('readonly', 'readonly');
        $('#TextBoxSectionCode').addClass('disabled');
        $('#TextBoxSectionCode').text(document.getElementById('TextBoxSectionName').val);
    }
    else {
        $('#TextBoxSectionCode').attr('readonly', false);
        $('#TextBoxSectionCode').addClass('abled');
        $('#TextBoxSectionCode').text('');
    }

});

answered Apr 6, 2015 at 19:54

pregoli

1007 bronze badges

Comments

lshettyl · Accepted Answer · 2015-04-06 19:55:18Z

0

You could do the following way.

//Cache reference to DOM as DOM scan is expensive!
var textBox = $('#TextBoxSectionCode');
$('#CheckBoxSectionCode').click(function () {
    //Use prop as opposed to attr
    textBox.prop("readOnly", false).removeClass('disabled').addClass('abled').text("");
    if ($(this).is(':checked')) {
        textBox.prop("readOnly", true).removeClass('abled').addClass('disabled').text($("#TextBoxSectionName").val());
    }
});

answered Apr 6, 2015 at 19:55

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Checkbox and click event handling

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related