使用jQuery / JS启用/禁用按钮

Question

I have a webpage where some data are shown. If there is more data than can be shown at once I have a navigation bar enabling one to navigate to the next pages. There are 4 buttons total; "first page", "previous page", "next page" and "last page". If one is at page 1 the first 2 needs to be disabled, if one is at the last page the last 2 buttons needs to be disabled.

Now I have seen bunch of example's (also here at stackOverflow) as to how to do it, problem is: none of them works!

I have tried (JS):

doc.getElmByID("button")
button.setAttribute('disabled', true/'disabled')
// (meaning both true and disabled have been tried with no luck).

jQuery:

$(button).attr('disabled', true/'disabled')
$(button).prop('disabled', true/'disabled')
$(button).button('disabled')

Now several of these does actually do something, they remove the "cursor=pointer" option, but the click event remains.

--EDIT--

HTML code

            html += '<div id="naviLeft"><img type="button" id="First" class="grey" src="images/dobbelt-pil-disabled.png" title="First page"> </img>';
            html += '<img type="button" id="Previous" class="grey" src="images/pil-disabled.png" title="Previous page"></img></div>';
            html += '<div id="changeRecords"></div>';
            html += '<div id="naviRight"><img type="button" id="Next" class="grey" src="images/pil-r-disabled.png" title="Next page"> </img>';
            html += '<img type="button" id="Last" class="grey" src="images/dobbelt-pil-r-disabled.png" title="Last page"></img> </div>';
            document.getElementById("navi").innerHTML = html;

            $('#First').click(function(){currentTable.First(), setNavigation()});
            $('#Previous').click(function(){currentTable.Previous(), setNavigation()});
            $('#Next').click(function(){currentTable.Next(), setNavigation()});
            $('#Last').click(function(){currentTable.Last(), setNavigation()});

...

setNavigation = function()
{
if  (currentTable)
{
// currentTable.total and currentTable.currentPage are placeholders for current Page and total pages.

    var current = currentTable.currentPage;
    var total = currentTable.total;

    var first = $('#First');
    var previous = $('#Previous');
    var next = $('#Next');
    var last = $('#Last');

    if  (current == 1)
    {
        $(first).attr('src', 'images/dobbelt-pil-disabled.png');
        $(first).css('cursor', 'default');

        $(previous).attr('src', 'images/pil-disabled.png');
        $(previous).css('cursor', 'default');
    }

    if  (current > 1)
    {
        $(first).attr('src', 'images/dobbelt-pil.png');
        $(first).css('cursor', 'pointer');
        $(first).hover(function(){$(this).attr('src', 'images/dobbeltpil-chosen.png');},function(){$(this).attr('src', 'images/dobbelt-pil.png');});

        $(previous).attr('src', 'images/pil.png');
        $(previous).css('cursor', 'pointer');
        $(previous).hover(function(){$(this).attr('src', 'images/pil-chosen.png');},function(){$(this).attr('src', 'images/pil.png');});
    }

Answer 1

jQuery:

$(button).prop("disabled", true);
$(button).prop("disabled", false);

Answer 2

This seems wrong to me:

<img type="button" 

this should be:

<input type="image" 

and be sure to wrap it with doc ready handler:

$(function(){
    $('[type="image"]').prop('disabled', true);
});

Answer 3

if your button is jquery ui is necessary to update the plugin

$("button").button();
...
...
..
..
$("button").attr("disabled","disabled").button("refresh");//disabled
$("button").removeAttr("disabled").button("refresh");//enabled

if not remove

button ("refresh")