Javascript enable already disabled text box

Question

i am trying to create a form where a text field loads up disabled, and if the user wants to input into this field they have to click a check box. I have this at the moment.

However with what is below the text box loads up enabled and ticking the check box will disable it. How can this be modified so this is reversed. i.e. the text box is first disabled and clicking the check box enables it?

Javascript code

$(document).ready(function () {
            $('#testcheckbox').change(function() {
                $('#testtextfield').attr('disabled', this.checked);
            });
        });

HTML code

<input type="checkbox" id="testcheckbox" />
<input type="text" id="testtextfield" />

Thanks.

score 5 · Accepted Answer · edited May 23 '17 at 12:17

5

Try using this setup:

<input type="checkbox" id="testcheckbox" />
<input type="text" id="testtextfield" disabled="disabled" />

$(document).ready(function () {
    $('#testcheckbox').change(function() {
        $('#testtextfield').prop('disabled', !this.checked);
    });
});

http://jsfiddle.net/93HJ3/

In this case, the textbox is disabled by default. Then, when clicking on the checkbox, the textbox is disabled based on its inverted checked property, for the opposite behavior you wanted.

If you look at http://api.jquery.com/prop/ , you'll see that it is the jQuery method more accepted for changing elements' properties like "disabled", "readonly", "checked", etc. And a good discussion about the differences: .prop() vs .attr() . But it's really up to you if you need to be changing the attribute or property, as they have different meanings.

edited May 23 '17 at 12:17

Community

1
1

answered Jan 15 '13 at 16:39

Ian

50,146
13
101
111

3

You should also explain why you're using `$.prop` instead of `$.attr` – Ruan Mendes Jan 15 '13 at 16:43
The real answer to the `$.attr` question is that you must remove the checked attribute to make your text field enabled (`$.removeAttr('checked')`). Setting `checked="false"` doesn't work. Previous versions of jQuery used to normalize it, but realized it was a mistake and `$.attr` no longer tries to set DOM properties for boolean attributes. http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes – Ruan Mendes Jan 15 '13 at 17:51
@JuanMendes The OP said their code was already working (and it's true - setting the value of `$.attr("disabled"` to `true` or `false` visually changes the look appropriately)...I'm not saying it _should_ work in this way, but it does. So I my answer was to do what they wanted - the opposite behavior of enabling/disabling when clicking the checkbox. And by "`$.attr` no longer tries to set DOM properties for boolean attributes", do you mean since today? Only since version 1.9 is the difference actually fixed, which was released today. – Ian Jan 15 '13 at 17:58
I did misunderstand it, they changed it in 1.6 http://ejohn.org/blog/jquery-16-and-attr/ but then reverted it to the normalizing behavior in 1.6.1. – Ruan Mendes Jan 15 '13 at 18:04

score 0 · Answer 2 · answered Mar 03 '17 at 16:18

Pure JavaScript equivalent if you don't want to use jQuery.

<input type="text" id="inputbox" diasbled="disabled" />

var inputbox = document.getElementById('inputbox');

document.addEventListener('DOMContentLoaded',function(){
    inputbox.removeAttribute('disabled');
});

Javascript enable already disabled text box

2 Answers2