How to Enable Or Disable Submit Button Using Jquery

Enable/Disable Submit Button Using Jquery

We can disable or enable any form element like button using Jquery prop or attr. If Jquery version is 1.6 or above, we can use Jquery prop. If Jquery version is 1.5 and below, we can use Jquery attr. Lets consider one example here. Suppose we have a TextBox and Button as shown below.




Enable/Disable Submit Button Using Jquery - Jquery prop ver : 1.6+

Initially, when there is nothing on the textbox, the Button will be disabled.



When we type anything on the textbox, the button should be enabled.



So on the KeyUp event of Textbox, we can apply following logic in Jquery.

$(function () {
    $('#btnInput').prop('disabled', true);
    $('#txtInput').keyup(function () {
        if ($(this).val() != '') {
            $('#btnInput').prop('disabled', false);
         }
    });
})




Enable/Disable Submit Button Using Jquery - Jquery attr

If Jquery version is 1.5 and below, we can use Jquery attr.

$(function () {
    $('#btnInput').attr('disabled', 'disabled');
    $('#txtInput').keyup(function () {
        if ($(this).val() != '') {
            $('#btnInput').removeAttr('disabled');
         }
    });
})