How to Enable Or 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.

How to Enable Or Disable Submit Button Using Jquery, Enable Submit Button Using Jquery, Disable Submit Button Using Jquery, How to Enable Submit Button Using Jquery, How to Disable Submit Button Using Jquery, Disable Submit Button, Enable Submit Button, Jquery




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

How to Enable Or Disable Submit Button Using Jquery, Enable Submit Button Using Jquery, Disable Submit Button Using Jquery, How to Enable Submit Button Using Jquery, How to Disable Submit Button Using Jquery, Disable Submit Button, Enable Submit Button, Jquery

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

How to Enable Or Disable Submit Button Using Jquery, Enable Submit Button Using Jquery, Disable Submit Button Using Jquery, How to Enable Submit Button Using Jquery, How to Disable Submit Button Using Jquery, Disable Submit Button, Enable Submit Button, Jquery

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






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