Question

我有一个网页，其中显示了一些数据。如果有比一次显示的数据更多的数据，我有一个导航栏，可以导航到下一页。共有4个按钮; “第一页”，“上一页”，“下一页”和“最后一页”。如果在第1页，则需要禁用前2个，如果在最后一页，则需要禁用最后2个按钮。

现在我已经看到一堆例子（也就是在stackOverflow）关于如何做到这一点，问题是：它们都不起作用！

我试过（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')

现在有几个确实做了一些事情，他们删除了“cursor = pointer”选项，但是click事件仍然存在。

- 编辑 -

HTML代码

            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

这对我来说似乎不对：

<img type="button"

这应该是：

<input type="image"

并确保用doc ready处理程序包装它：

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

Answer 3

如果您的按钮是jquery，则需要更新插件

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

如果不删除

button ("refresh")

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

3 个答案: