Disabling a button through jQuery doesn't work

Question

This is my HTML code:

<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Previous</a></div>

The button next must be disabled until something is selected

JQUERY code:

if (isNaN(selections[questionCounter])) {
    $('#next').attr('disabled', 'disabled');
}
else {
    questionCounter++;
    displayNext();
}

I don't know how I can fix this. I need something like that one http://www.revillweb.com/demos/jQueryDisableButton/jqueryDisableButton.html

Answer 1

Disable on a div is a non-sense.

You need to use a button in order to be able to disable it :

<button class='button' id='next'>Next</button>
<button class='button' id='prev'>Previous</button>

Also use JQuery to catch onClick event.

Answer 2

There is no standard way to 'disable' <a> or <div> . But you can .unwrap() the <a> .

<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Previous</a></div>

<script>
if (isNaN(selections[questionCounter])) {
    $('#next').contents().unwrap();
}
else {
    questionCounter++;
    displayNext();
}
</script>

Answer 3

Like it was say you need to have button for use disabled property.

Other possibility if you realy want to stay with your div and a :

<script>
if (isNaN(selections[questionCounter])) {
    $('#next a').click(function(e) { e.preventDefault(); };
}
else {
    questionCounter++;
    displayNext();
}
</script>