Question

我该怎么做？

我有一个禁用的jquery ui按钮，我想显示一个警告。更改页面上的下拉列表时，该按钮将启用。

HTML：

<button id="AssignRolesButton" disabled="disabled">Assign Roles</button>

JS：

$(function () {    
    $('#AssignRolesButton').button();

    //doesnt work
    $('#AssignRolesButton').button().click(function (e) { e.preventDefault(); alert('yoyo'); }); 

    $('#ApplicationsDropdownList').change(function () {  
        //enables the button 
        $('#AssignRolesButton').removeAttr('disabled').removeClass('ui-state-disabled');
        //doesnt work
        $('#AssignRolesButton').button().click(function (e) { e.preventDefault(); alert('yoyo'); });
        // also doesnt work
        $('#AssignRolesButton').click(function (e) { e.preventDefault(); alert('yoyo'); });  
   });    
});

总而言之，我需要按钮在禁用时使用jquery ui样式，并在启用时注册click函数。

Answer 1

使用变通方法，因为禁用的元素不会触发附加事件：

DEMO

$(function () {
    var $assignBtn = $('#AssignRolesButton');
    $('<div id="btn_overlay"/>').css({
        position: 'absolute',
        top: $assignBtn.offset().top,
        left: $assignBtn.offset().left,
        width: $assignBtn.outerWidth(),
        height: $assignBtn.outerHeight(),
        'z-index': 1000,
    }).click(function () {
        $assignBtn.triggerHandler('click');
    }).appendTo('body');

    $('#ApplicationsDropdownList').change(function () {
        $('#btn_overlay').remove();
        $assignBtn.prop('disabled', false);
        //...
    });
    $assignBtn.click(function (e) {
        e.preventDefault();
        alert('yoyo from btn handler');
    });
});

Answer 2

//enables the button 
$('#AssignRolesButton').removeAttr('disabled').removeClass('ui-state-disabled');

没有。您需要使用enable method of your Button-widget（Demo）。否则，jQuery-UI按钮仍然被禁用（即使它看起来不是这样），jQueryUI拦截click事件，停止传播，以便不调用你的处理程序。你可以清楚地看到这种行为here - 在jQueryUI的拦截器被调用之前附加的处理程序。

e.preventDefault;

正如其他人提到的，这是一个方法，需要调用：e.preventDefault();。

Answer 3

然后，只需在下拉列表中选择了某些内容，即可绑定click事件。否则，请不要碰它。

将jquery点击功能添加到禁用按钮？

3 个答案: