1

以下代码 (*) 用于在两个按钮之间切换禁用属性，您可以在http://jsfiddle.net/cNSVX/3/上查看它。

我想知道概括此代码以便将此行为附加到几个按钮的最佳方法是什么。
类似于以下内容。 

body.onload(togglingButton(elem1, elem2));

$('#filterOpened').click(function() {
    $('#filterOpened').attr('disabled', 'disabled');
    $('#filterClosed').removeAttr('disabled');
});

$('#filterClosed').click(function() {
    $('#filterClosed').attr('disabled', 'disabled');
    $('#filterOpened').removeAttr('disabled');
});

function togglingButton (elem1, elem2) {
    if (elem2.attr('disabled')) {
        elem1.attr('disabled', 'disabled');
        elem2.removeAttr('disabled');
   } else {
        elem2.attr('disabled', 'disabled');
        elem1.removeAttr('disabled');
   } 
};
​
4

2 回答 2

1

您可以使用 jQuery 进行如下操作。此外，如果您使用的是 jQuery 1.6+，那么您应该使用.prop()来切换您的disabled属性。

属性通常会影响 DOM 元素的动态状态，而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性、输入和按钮的 disabled 属性或复选框的 checked 属性。prop方法应该用于设置禁用和检查，而不是 .attr() 方法。.val() 方法应该用于获取和设置值。

​$('button').click(function(){ //<---  attaches click to all button's
      $(this).prop('disabled',true);  //<-- only disable the clicked button
      $('button').not(this).prop('disabled',false);  //<-- all button's but the clicked one should be enabled
});​​​

这是一个示例小提琴http://jsfiddle.net/cNSVX/5/

如果您打算将某些按钮排除在切换之外，最好给它们一个类，这样您就可以更轻松地选择需要/不需要的按钮

于 2012-07-06T13:45:42.837 回答
0

一种简单的方法是使用 jQuery 的.data()函数来链接这两个元素，然后为这两个元素分配一个事件处理程序：

function disableToggle(el1,el2) {
    el1.data('partner',el2);
    el2.data('partner',el1);

    el1.add(el2).on('click',function(){
        $(this).prop('disabled',true);
        $(this).data('partner').prop('disabled',false);
    });
}

$(function(){
    var opened = $('#filterOpened');
    var closed = $('#filterClosed');

    disableToggle(opened,closed)
});

我创建了一个演示：

jsFiddle 演示

于 2012-07-06T13:48:21.510 回答