1

2つのボタン間で無効な属性を切り替えるための次のコード（*）は機能し、 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ます。

プロパティは通常、シリアル化されたHTML属性を変更せずに、DOM要素の動的な状態に影響を与えます。例には、入力要素のvalueプロパティ、入力とボタンのdisabledプロパティ、またはチェックボックスのcheckedプロパティが含まれます。.attr（）メソッドの代わりに、propメソッドを使用して無効に設定し、チェックする必要があります。値の取得と設定には、.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

これを行う簡単な方法の1つは、jQueryの.data()関数を使用して2つの要素をリンクし、単一のイベントハンドラーを両方に割り当てることです。

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 に答える