CODEWITHSUNDEEP
javascripthtmlcss
Tiagojdferreira
Tiagojdferreira

Reputation: 1122

Disable not working for my button

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;

Upvotes: 7

Views: 30595

Answers (5)

Alex Char
Alex Char

Reputation: 33218

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

Upvotes: 8

pinakin
pinakin

Reputation: 442

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

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

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

});

Upvotes: 0

Magicprog.fr
Magicprog.fr

Reputation: 4100

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;
  ...
}

Upvotes: 5

vidriduch
vidriduch

Reputation: 4863

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

Upvotes: 0

Vinicius de Souza
Vinicius de Souza

Reputation: 156

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/

Upvotes: 2

Related Questions