如何在materialize css中使用jquery禁用按钮

Question

我正在使用jquery来禁用materialize css中的按钮。根据文档here，禁用按钮的方法只是添加一个名为'disabled'的类。我想通过简单地添加类'禁用'，按钮将自动禁用，但事实并非如此。这是我的代码：

html：

<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">

jquery：

$('#submit-btn').off().on('click', function(){
    $('#submit-btn').addClass('disabled');
});

Answer 1

试试这个

$('#submit-btn').removeClass("waves-effect waves-light submit").addClass('disabled');

工作演示

$(document).ready(function() {
  $('#submit-btn').on('click', function() {
    $(this).removeClass("waves-effect waves-light submit").addClass('disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<button id='submit-btn' class="btn waves-effect waves-light submit red" type="button" name="action">

Answer 2

使用javascript禁用按钮。

eleme.classList.add('disabled');

使用javascript启用按钮。

elem.classList.remove('disabled');

例如：

let btn = document.getElementById('submit-btn');
btn.classList.add('disabled'); //This will disable the button

Answer 3

怎么样？

$('#submit-btn').prop('disabled', true).addClass('disabled');

Answer 4

禁用可以使用的按钮

$("#submit-btn").attr("disabled", "true");

Answer 5

创建一个包含按钮的变量（例如，submitBtn），然后添加一个事件侦听器（例如，在DOMContentLoaded上），然后使函数使用SubmitBtn.disabled = true禁用按钮。