javascript - 删除JQuery中的单个单词属性

Question

我的 html 网页上有一个 Bootstrap 4 按钮。 w3schools ( https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp ) 表示，通过以下方式包含一个按钮将使其显示为禁用状态，即不可点击。

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

我想设置按钮的表单，以便当单击它时，它会被禁用。以下是我迄今为止所掌握的相关部分:

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

但是，我看到的 .attr 的用法更像

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

其中有属性的名称和值，而不是在上面，其中“disabled”一词单独出现在按钮开始标记中。难道“残疾人”这个词实际上不是一个合适的属性吗？ w3schools 是这样描述的。我怎样才能让这段代码工作？

Answer 1

这不是您需要使用的正确的:

form.attr('disabled')

替换为:

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

您必须使用.prop()添加和删​​除属性属性。在下面的代码片段中查看:

$(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>