7

I have been trying to make my own button and for some reason I don't seem to get the :disable to work right. I want the button to be disabled (not respond to click and grey text). What am I missing?

http://jsfiddle.net/aj4n0ymd/

HTML:

<!doctype html>
<div id="menu"> 
    <a class="button" disabled="true" id="button">Click</a>
</div>

CSS:

.button {
    display: block;
    width: 40%;
    text-align: center;
    float: left;
    color: #000000;
    font-size: 10px;
    padding: 0.5em 1em;
    text-decoration: none;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}
.button:hover {
    background: #f0f0f0;
    text-decoration: none;
}
.button:active {
    background: rgb(150, 150, 150);
    background-image: linear-gradient(to bottom, rgb(150, 150, 150), rgb(200, 200, 200));
    text-decoration: none;
}
.button:disabled {
    color:rgb(150, 150, 150);
}

Also, this is going to be used with javascript. Is this enough in the js to change the disabled state?

button = document.querySelector("#button");
button.disabled = true;
Tiagojdferreira
  • 1,122
  • 2
  • 14
  • 20

5 Answers5

8

The a tag doesn't have a disabled attribute. Take a look to the doc for the valid attributes that can have. Only inputs or select or textareas can have disabled attribute.

You can remove href or add a click handler that returns false.

$("#button").on("click", function() {
  alert("ok");
});
.button {
  display: block;
  width: 40%;
  text-align: center;
  float: left;
  color: #000000;
  font-size: 10px;
  padding: 0.5em 1em;
  text-decoration: none;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  /* Rules below not implemented in browsers yet */
  -o-user-select: none;
  user-select: none;
  background: transparent;
  border: none;
}
.button:hover {
  background: #f0f0f0;
  text-decoration: none;
}
.button:active {
  background: rgb(150, 150, 150);
  background-image: linear-gradient(to bottom, rgb(150, 150, 150), rgb(200, 200, 200));
  text-decoration: none;
}
.button:disabled {
  color: rgb(150, 150, 150);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" disabled="disabled">
  <input type="button" class="button" id="button" disabled="disabled" value="Click" />
</div>

References

MDN <a> element

Alex Char
  • 32,879
  • 9
  • 49
  • 70
5

In your HTML :

The correct way is disabled="disabled" instead of this disabled="true" but this doesn't do anything for a <a...></a> link.

You can add an onclick event to avoid the link to redirect :

<a class="button" onclick"return false;" id="button">Click</a>

Then in your CSS, just replace the color property with a grey color for your button : 

.button {
  ...
  color: grey;
  ...
}
Magicprog.fr
  • 4,072
  • 4
  • 26
  • 35
1

It's simple, your element must have to be a button

<!doctype html>
<div id="menu"> 
    <button class="button" disabled="disabled" id="button">Click</button>

</div>

Working fiddle: http://jsfiddle.net/aj4n0ymd/3/

Vinicius de Souza
  • 146
  • 1
  • 8
0

does not have disabled attribute ... if you need to disable the click event on a you can use JQuery's preventDefault() on click event:

$( "a" ).click(function( event ) {
    event.preventDefault();
});

as per event.preventDefault()

vidriduch
  • 4,753
  • 8
  • 41
  • 63
0

it should be button or anchor tag with little bit javascript.

http://jsfiddle.net/jasongennaro/QGWcn/ [Jsfiddle]

$('#link').click(function(e){
e.preventDefault();

});

pinakin
  • 422
  • 4
  • 16