如何让停用的按钮在点击时执行某些操作？（JS）

问题描述：

var delete_disabled = (parseInt(row.attr("data-state"), 10) === serverVars.obligationStateNotStarted) ? '' : 'disabled="disabled"'; 
     newHtml += "<button class=\"delete small\"" + delete_disabled + " title=\"" + labelDelete + "\"><i class=\"icon-trash\"></i></button>";

它检查是否有一定的标准被满足，但是如果它是那么它禁用一次按钮，按钮是无效的，我想事情还是发生当我点击它？我尝试了所有我能想到的，并希望得到一些建议。在此先感谢:)

http://stackoverflow.com/questions/7833854/jquery-detect-click-on-disabled-submit-button这可以帮助你。 – TheFrozenOne

使用其布局来播放它的禁用的展示，但不是禁用它，只需为click事件添加不同的处理程序。 – melancia

不要禁用它，使它看起来像禁用（从用户的角度来看，灰色文本和背景等），并用变量或其他东西处理它的状态。 –

答

除了在单击禁用按钮时实际触发事件，还可以在禁用按钮前添加一个哑元，并在该元素上添加一个与禁用状态关联的侦听器。例如，

http://jsfiddle.net/FN45M/

$(document).ready(function() { 
/*this click listener could also be added as part of the disableButton function.*/ 
    $(document).on('click', '.click-div', function() { 
     console.log('clicked'); 
     alert('clicked'); 
    }); 

    disableButton($('button')); 
    //enableButton($('button')); 

}); 

function disableButton($el){ 
    var wrapper = $el.wrap("<div class='wrapper'>").parent(); 
    wrapper.css({"display":"inline","position":"relative"}); 
    var divClick = $("<div class='click-div'>"); 
    divClick.css({"position":"absolute", 
        "top":0, 
        "height":"100%", 
        "width":"100%" 
       }); 
    wrapper.append(divClick); 

    /*divClick.on('click', function() { 
     console.log('clicked'); 
     alert('clicked'); 
    });*/ 
} 

function enableButton($el){ 
    $el.next(".click-div").remove(); 
    $el.unwrap("<div class='wrapper'>"); 
    $el.prop("disabled",false); 
}

HTML

<button disabled>test</button>

答

使用下面的代码

JQuery的：

$("button#disabled, button#enabled").click(function(){ 
    if($(this).attr('id') === 'disabled'){ 
     alert('disabled'); 
     // do your suff here for disabled button 
    } else { 
     alert('enabled'); 
     // do your suff here for enabled button 
    } 
});

HTML：

<button id="disabled" style="color: graytext;"><i>disabled</button> 
<button id="enabled">enabled</button>

Example here

如何让停用的按钮在点击时执行某些操作？ （JS）

相关推荐

如何让停用的按钮在点击时执行某些操作？（JS）