CODEWITHSUNDEEP
javascriptc#jquery
PHG
PHG

Reputation: 180

Checkbox and click event handling

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.

Upvotes: 0

Views: 78

Answers (4)

lshettyl
lshettyl

Reputation: 8181

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());
    }
});

Upvotes: 0

pregoli
pregoli

Reputation: 100

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('');
    }

});

Upvotes: 0

Touhid Alam
Touhid Alam

Reputation: 343

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')

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22405

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."

Upvotes: 1

Related Questions