Remove single word attribute in JQuery

Question

I have a Bootstrap 4 button on my html webpage. w3schools (https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp) says that including a button the following way will have it appear disabled, i.e. unclickable.

<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>

I'd like to set up the button's form so that when it's clicked, it becomes disabled. Here is the relevant portion of what I have so far:

 $(document).on('submit', '.Validate', function(e){
        e.preventDefault();
        var form = $( this );
        form.attr('disabled')
        $.ajax({
            type:'POST',
            url:'/workflowautomator/setready/',
            data:{
                name: (form.find('input[class="name"]')).val()
            },
            success:function(){
                form.removeAttr('disabled')
            }
        });
 });

However, the usage I see for .attr is more like

$( "#greatphoto" ).attr( "title", "Photo by Kelly Clark" );

where there is a name for the attribute and a value, instead of up above, where the word "disabled" is alone in the button start tag. Is the "disabled" word not actually a proper attribute? w3schools describes it as such. How might I make this code work?

Possible duplicate of [Disable/enable an input with jQuery?](https://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) Looks like you haven't done any research — Hassan-Zahid, Sep 05 '18 at 18:19

score 1 · Accepted Answer · answered Sep 05 '18 at 18:13

This is not the right one you need to use:

form.attr('disabled')

Replace it with:

form.find(".btn-primary").addClass("btn-disabled").prop("disabled", true);

You have to use .prop() to add and remove the property attributes. Check it out in the below snippet:

$(function () {
  $("button").click(function () {
    $(this).addClass("btn-disabled").prop("disabled", true);
  });
});

body {padding: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Disable Me</button>

Remove single word attribute in JQuery

1 Answers1