How to properly enable/disable input field on click with jQuery?
I was experimenting with:
$("#FullName").removeAttr('disabled');
which removes disabled="disabled" from this input field:
<input id="FullName" style="width: 299px" value="Marko" disabled="disabled" />
But how to add it again with click on another button or how to disable input field on click?
For jQuery version 1.6+ use prop:
$('#elementId').click(function(){
$('#FullName').prop('disabled', true\false);
});
For older versions of jQuery use attr:
$('#elementId').click(function(){
$('#FullName').attr('disabled', 'disabled'\'');
});
$("#FullName").prop('disabled', true);
Will do.
But keep in mind after you disable it (by the above code) onclick handler wont work as its disabled. To enable it again add $("#FullName").removeAttr('disabled'); in the onclick handler of another button or field.
$('#checkbox-id').click(function()
{
//If checkbox is checked then disable or enable input
if ($(this).is(':checked'))
{
$("#to-enable-input").removeAttr("disabled");
$("#to-disable-input").attr("disabled","disabled");
}
//If checkbox is unchecked then disable or enable input
else
{
$("#to-enable-input").removeAttr("disabled");
$("#to-disable-input").attr("disabled","disabled");
}
});
another simple method to enable/disable input feild
$("#anOtherButton").click(function() {
$("#FullName").attr('disabled', !$("#FullName").attr('disabled'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="FullName" style="width: 299px" value="Marko" disabled="disabled" />
<br>
<br>
<input type="button" id="anOtherButton" value="disable/enable" />This should do it.
$("#FullName").attr('disabled', 'disabled');
Shiplu is correct, but use this if you have are not using jquery 1.6+
$("#anOtherButton").click(function(){
$("#FullName").attr('disabled', 'disabled');
});
Set one or more attributes for the set of matched elements
# in the first selector $("anOherButton")... and it has typo.To toggle a field between disabled and enabled, try this:
$('#toggle_button').click(function () {
$('#FullName').prop("disabled",
function (i, val) {
return !val;
});
})
