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

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

• javascript
• jquery
• html
• css
• materialize

• 1 That is only CSS. If you add JS or HTML action you have to disbale it manually – Joy Biswas Commented Mar 23, 2016 at 9:33
• @joyBlanks is right, that will be just css styling, to disable events etc, you will need to do it manually – The Process Commented Mar 23, 2016 at 9:38
• Hmm, so, how to disable it with jquery, I try .prop('disabled', true), but still it won't disable the button. – oentoro Commented Mar 23, 2016 at 9:40
• stackoverflow./a/36174382/4763793 – Rino Raj Commented Mar 23, 2016 at 9:43
• 1 If you have an onclick attached to it. The onclick should do a check that if it hasClass disabled. If no then proceed else return false – Joy Biswas Commented Mar 23, 2016 at 9:49

5 Answers 5

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./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">

What about

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

To disable the button using javascript.

eleme.classList.add('disabled');

To enable the button using javascript.

elem.classList.remove('disabled');

E.g:

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

to disable button you can use

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

Create a variable which holds the button (say submitBtn), then add an event listener (say on DOMContentLoaded), then have the function disable the button with submitBtn.disabled = true;