How to enable/disable an html button based on scenarios?

Question

I have a button in my webpage with below code -

HTML:

Answer 1

You can do it either by modifying the attribute or by adding/removing a class.

Modifying attribute

You will want to switch between and

With javascript, it could look like this:

if flag=1: 
    document.getElementById("your-btn").disabled = true;
else: 
    document.getElementById("your-btn").disabled = false;

And with jquery, like this:

if flag=1: 
    $('#your-btn').prop('disabled', true);
else: 
    $('#your-btn').prop('disabled', false);

Adding/removing class

Add the following css:

.btn-disabled{
    cursor: not-allowed;
    pointer-events: none;
}

And add/remove a class to the button.

With jquery:

if flag=1: 
    $('#your-btn').addClass('btn-disabled');
else: 
    $('#your-btn').removeClass('btn-disabled');

If you don't want jquery, but pure javascript, here is how to do it.