How to disable button using jquery in materialize css

Question

I am using jquery to disable a button in materialize css. According to documentation here, the way to disable button is simply by adding a class named 'disabled'.I think by simply add class 'disabled', the button will automatically disabled, but it is not. Here is my code:

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

Try this

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

Working Demo

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