Javascript在复选框勾选上启用文本字段

Question

I have this HTML Code:

<input type="checkbox" onclick="document.getElementById('directory_entry_name').disabled=this.checked;" name="directory_entry" id="directory_entry" />

<strong>Name: </strong><input type="text" name="directory_entry_name" id="directory_entry_name" disabled="disabled" />

The text box is disabled and Im trying to make it so when the checkbox is checked it will enable the text box, and when it is unchecked again it will disable the text box.

It works if I use:

<input type="checkbox" onclick="document.getElementById('directory_entry_name').disabled=false;" name="directory_entry" id="directory_entry" />

But then when it is unchecked it doesnt re-disable the textbox.

Answer 1

It's reversed. Put a ! (not) in there.

document.getElementById('directory_entry_name').disabled=!this.checked;

Answer 2

Browser checks if there is attribute disabled, not the value: disabled attribute description So in function to disable or enable the input you should add and delete "disabled" attribute. You can do this with jQuery .removeAttr() and .attr()

so the function will look like this:

function SetInputActive(checkbox) {
if($(checkbox).is(':checked')) $('directory_entry_name').removeAttr("disabled");
else $('directory_entry_name').attr("disabled", "disabled");
}