复选框和单击事件处理

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.

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

Answer 2

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

Answer 3

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

});

Answer 4

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