CODEWITHSUNDEEP
jquerymaterialize
Clemzd
Clemzd

Reputation: 945

How to disable button with materialize?

I try to disable a button in materialize without delete the click event. But as you can see on this jsfiddle, I only get the visual effect. The click event is still launching.

I tried the following:

$('#btnOne').prop('disabled', true).addClass('disabled');

Is it a bug? Or am I doing something wrong?

EDIT : it seems there isn't the problem with the tag button

Upvotes: 1

Views: 4401

Answers (4)

Milo Chen
Milo Chen

Reputation: 3975

Not sure why jQuery cannot support in some case.
When I use this way, it work !

document.getElementById('yours-id').classList.add("disabled");

By the way, the following code is html tag of my button.

    <a class="btn-large waves-effect waves-light teal lighten-1" id="rtmp-youtube-start">YouTube Live Sync</a>

In this case, I'm sure it work.

Upvotes: 1

Clemzd
Clemzd

Reputation: 945

I did find the answer.

a tags cannot be disabled by properties, button can be used instead.

Upvotes: 2

Ardian
Ardian

Reputation: 408

You can add some CSS rule and keep your current jQuery code.

For example:

.disabled {
    pointer-events: none;
}

This will prevent all the events, when that class is triggered.

See the fiddle:

NOTE: Pointer Events is supported in most modern browsers. Check it out: http://caniuse.com/#feat=pointer-events

Upvotes: 5

WillardSolutions
WillardSolutions

Reputation: 2314

You can remove the listener when #disableBtnOne is clicked - 

$('#disableBtnOne').click(function(){
    $('#btnOne').prop('disabled', true).addClass('disabled').off( "click" );
});

See new Fiddle

Upvotes: 2

Related Questions