disable button in a <li>

Question

okay, if I have six buttons in a list, under the li tag (each on is rel to a part of an array), how can I disable a button while it's doing it's thing? (In this case playing a video)

I know it's a little vague (i haven't supplied code or anything of the sort), but that's because I don't know how to go about it. If I could at least get pointed in the right direction, that would be helpful, so that even if I can't figure it out, at least I can be specific with my problem... thanks...

EDIT this is what I've now done

<li rel='1' id="first">
    <div style="top:0px;">
      <img src="graphics/filler.png" alt="" width="280" height="128" onClick="asess"/>    
    </div>
</li>

and then added the corresponding function

function asess() {
    document.getElementById("first").disabled = true;
}

I'm not to concerned with adding the function back just yet, because first I'd like to make this part work.

EDIT I've got this, which should work, but I guess it's not "talking" to the button?

$("li, .thumbs").bind("touchstart click", function() {
var $this = $(this);
if (!document.getElementById("first").disabled) {
            document.getElementById("first").disabled = true }
            else {document.getElementById("first").disabled = false};
        });

I know it will only talk to the button with that id (first one) but as long as I can make it work for one, I can do the rest. So, what am I doing wrong?

Answer 1

Each button will have an onclick event handler. To prevent the onclick handler from doing anything the JavaScript method attached to the handler should return false. If you are doing this with jQuery return false; is the same as calling e.preventDefault (or event.preventDefault for IE).

When the normal event handler initiates the action associated with the button it should add the event handler that disables the onclick action.

You will probably need to apply a new CSS style to the button as well so the user knows it's disabled.

When the action completes you need to remove event handler that disables the onclick action and use the normal one again.

You could always just use a flag to say an action is in progress and set this on and off with the actions. If the flag is on then the event handler method returns false.

By using the event handler you could also show an alert to the user when they try and click the button before you return false.

EDIT:

Here is the sort of JavaScript you'll need, the first click starts the process which will stop itself after five seconds using setTimeout('stopAction()', 5000);. If you click the item again during that time you get the wait message.

I would recommend you look at using jQuery to develop a robust cross browser solution.

var inProgress = false;

function asess() {
    if(inProgress) {
      alert('Please wait ...');
      return false;
    } else {
      startAction();
    }
}

function startAction() {
    inProgress = true;
    alert('Starting');
    document.getElementById("first").style.backgroundColor  = '#333333';
    setTimeout('stopAction()', 5000);
}

function stopAction() {
    inProgress = false;
    alert('Stopping');
    document.getElementById("first").style.backgroundColor  = '#FFFFFF';
}

Answer 2

You could "disable" the element within the click handler and re-enable it when the callback is executed successfully.

Click handler binding to elements with disabled="disabled" attribute is not guaranteed to be consistently implemented across browsers (i.e. the event could/would still fire) and is not allowed except on form elements anyway. I'd just add class="disabled" which gives me additional powers to style the disabled element state by, say, greying it out.

Oh, and jQuery. Naturally, this logic could be reproduced in "normal" javascript but is so tidier with library usage, fiddle:

$('#my-button').click(function() {
    var $this = $(this); //cache the reference
    if (!$this.hasClass('disabled')) {
        $this.addClass('disabled');
        alert('hello world!');
        setTimeout(function($btn) {
            $btn.removeClass('disabled');
        }, 5000, $this);
    } else {
        return false;
    }
});

Answer 3

document.getElementById("my_button").disabled = true;

and when you're done.

document.getElementById("my_button").disabled = false;