The easiest way to disable a button is disabled using jQuery

Question

When I use .prop ('disabled', true) to disable the button, it works, but the button does not look disabled. I remember in the old days when I used .attr ('disabled', 'disabled') to disable buttons, they will become more noticeably disabled, i.e. The text will be grayed out or something else, so the user will not try to click. Now I think that the border of the button disappears a little, but the text is missing.

What is the easiest way to get your behavior back? I am lazy and do not want to write one line of code to disable this button, and the other to disable it - I want, if possible, to get both effects in one command. Should I use a different element than the button? Another way to disconnect?

I made a fiddle here: http://jsfiddle.net/ak2MG/ . Here is the code.

HTML:

<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>

JavaScript:

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true); } );

Answer 1

Or change the opacity of the button

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true).css('opacity',0.5);
});

Fiddle

Answer 2

I would add a class to the class disabled.

This allows you to control the style from CSS instead of javascript, so your whole style is in one place (where it should be).

: JSFiddle

HTML

<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>

JS

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    $('#mybutton').prop('disabled',true).addClass('disabled');
});

CSS

.disabled {
    color: #999;
}

Answer 3

,

$('#mybutton').click( function() {
    $('#mydiv').append("<p>Button was clicked.</p>");
    my_button_disable(this);
});

function my_button_disable(btn) {
    $(btn).prop('disabled',true);
    $(btn).css('color', 'lightgray');
    // put whatever else you want here
}

http://jsfiddle.net/ak2MG/6/

Answer 4

Simplest - CSS CSS, , , -: .

    button:disabled {
        background: #F5F5F5;
        color : #C3C3C3;
       cursor:none;
        pointer-events: none;
    }

Answer 5

attr() prop() API jQuery , .

. , , "" Google Chrome ( 33.0.1750.154 m). ,

button[disabled],
button.disabled {
    color: #999;
    background: #DDD;
    border: 1px solid #CCC;
}