Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

Question

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

While attempting to disable a button in Materialize CSS using jQuery, I encountered an issue. Despite following the documentation found here, it seems that simply adding the 'disabled' class does not automatically disable the button as expected. Here is the code snippet I am working with:

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

Answer 1

Answer №1

Give this a try

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

See it in action!

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

Give this a try

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

See it in action!

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

Answer №2

What do you think of this?

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

Answer 4

What do you think of this?

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

Answer 5

Answer №3

Using javascript to deactivate the button.

elem.classList.add('disabled');

To activate the button using script.

element.classList.remove('disabled');

Example:

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

Answer 6

Using javascript to deactivate the button.

elem.classList.add('disabled');

To activate the button using script.

element.classList.remove('disabled');

Example:

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

Answer 7

Answer №4

If you want to deactivate a button, you can achieve it by executing the following code:

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

Answer 8

If you want to deactivate a button, you can achieve it by executing the following code:

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

Answer 9

Answer №5

First, declare a variable named submitButton to hold the button element. Next, attach an event listener for when the DOM content is fully loaded. In this event, create a function that sets the disabled property of the submitButton to true.

Answer 10

First, declare a variable named submitButton to hold the button element. Next, attach an event listener for when the DOM content is fully loaded. In this event, create a function that sets the disabled property of the submitButton to true.

Learn how to dynamically disable a button using jQuery within the Materialize CSS framework

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Rely on the razor method for generating URLs

How to Retrieve Checkbox Values from Multiple Rows Using JavaScript

Unforeseen SyntaxError: Unexpected symbol detected

Verify the presence of an image

Try implementing a body template when using the mailto function

AJAX - Implementing a delay in displaying AJAX results

How can I display all categories in a Radar chart using amcharts 5

Turning a lambda function into a function that is compatible with next.js API: A step-by-step guide

What causes the disappearance of CSS styles when attempting to modify the className in react js?

HTML5 Applications with Intel XDK

Using a dojo widget within a react component: A beginner's guide

Transforming varied JavaScript objects into a serial form

Utilizing ProtractorJS to Extract Numbers from Text within an Element and Dynamically Adding it to an Xpath Expression

Using Vue to showcase the result of a form submission on a separate page

Transform an item into a map of the item's properties

The 'substr' property is not found in the type 'string | string[]'

"Troubleshooting: Inability to send emails through PHP mail script while using jQuery's

JSON calls that can be made across different domains

Looking to update a component in Vue 3 and Laravel 9 without the need to reload the entire webpage

When examining passwords, Bcrypt returns false