Question

以下代码（*）用于在两个按钮之间切换已禁用的属性，您可以在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');
   } 
};

Answer 1

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

属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的value属性，输入和按钮的disabled属性或复选框的checked属性。 prop方法应该用于设置disabled和checked而不是.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/

如果你打算从切换中排除一些按钮，最好给他们一个课程，这样你就可以选择你需要/不需要的那些

Answer 2

一种简单的方法是使用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 DEMO

概括用于切换禁用属性的代码的最佳方法

2 个答案: