通用化用于切换禁用属性的代码的最佳方法

The best way to generalise a code for toggling the disabled attribute

本文关键字：代码 最佳 方法 属性 用于 通用化      更新时间：2023-09-26

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

像下面这样用jQuery来做。 此外，如果您使用的是jQuery 1.6+，则应使用.prop()来切换disabled属性。

属性通常会影响 DOM 元素的动态状态，而不会更改序列化的 HTML 属性。示例包括输入元素的 value 属性、输入和按钮的禁用属性或复选框的选中属性。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/示例

如果您打算从切换中排除某些按钮，最好给它们一个类，以便您可以更轻松地选择您需要/不需要的按钮

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

我创建了一个演示：

js小提琴演示

相关文章：