0

我怎样才能做到这一点？

我有一个禁用的 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 样式，并在启用时注册单击功能。

4

3 回答 3

1

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

演示

$(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');
    });
});
于 2013-07-02T13:32:02.830 回答
1 
//enables the button 
$('#AssignRolesButton').removeAttr('disabled').removeClass('ui-state-disabled');

不可以。您需要使用enableButton-widget ( Demo ) 的方法。否则，jQuery-UI-button 仍然被禁用（即使它看起来不像这样）并且 jQueryUI 拦截点击事件，停止它的传播，这样你的处理程序就不会被调用。你可以在这里清楚地看到这种行为——在 jQueryUI 的拦截器之前附加的处理程序仍然被调用。

e.preventDefault;

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

于 2013-07-02T13:45:00.573 回答
0

然后，当您在下拉列表中选择了某些内容时，只需绑定单击事件。否则，不要动它。

于 2013-07-02T13:24:47.883 回答