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

【问题标题】：enable/disable buttons with jquery/JS使用 jquery/JS 启用/禁用按钮
【发布时间】：2014-01-15 22:46:25
【问题描述】：

我有一个显示一些数据的网页。如果有更多的数据不能一次显示，我有一个导航栏，可以导航到下一页。共有 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”选项，但点击事件仍然存在。

--编辑--

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');});
    }

【问题讨论】：

：有什么特别的错误吗？？
foo.disabled = true; whit foo 是按钮。（即foo = document.getElementById('yourButtonId')。Here's a fiddle
如果按钮元素然后$("button").prop('disabled', true);如果id然后$("#button").prop('disabled', true);
对不起。忘记。 foo.disabled = true 也不起作用
button.setAttribute('disabled', true/'disabled') // （表示 true 和 disabled 都试过了，但都没有运气）。

标签： javascript jquery

【解决方案1】：

这对我来说似乎是错误的：

<img type="button"

这应该是：

<input type="image"

并确保用doc ready handler 包裹它：

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

【讨论】：

第二双眼睛帮了大忙 :) 我太专注于功能，以至于错过了 img type=but。结果发现功能还是可以的。

【解决方案2】：

jQuery:

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

【讨论】：

【解决方案3】：

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

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

如果不删除

button ("refresh")

【讨论】：

“未捕获的错误：无法在初始化之前调用按钮上的方法；试图调用方法‘刷新’”。但它确实拿走了 cursor=pointer 并将其设置为默认值，但 onclick 仍然存在。