0

私は2つのチェックボックスを持っています:

<input id="outside" type="checkbox" value="1" data-gid="41820122" />
<input id="inside" type="checkbox" value="1" data-gid="41820122" />

私はそれらを相互に排他的にしました：

$(function(){
  //mutually exclusive checkboxes
  $("input[data-gid]").click(function(){
    var gid = $(this).attr('data-gid');
    var fid = $(this).attr('id');
    var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
    checkboxes.attr("checked", false);
   });
});

これはうまくいきます。しかし、「内側」チェックボックスにクリック機能を追加したいとも考えています。同じフォームのテキストエリアを有効/無効にしたいので、これを行いました：

$('#application_inside').click(function() {
        if ($(this).is(':checked')) {
          return $('textarea').removeAttr('disabled');
        } else {
          return $('textarea').attr('disabled', 'disabled');
        }
 });

そのため、「内部」チェックボックスがチェックされている場合はテキストエリアが有効になり、チェックされていない場合はテキストエリアが無効になります。

問題は、「内側」チェックボックスがチェックされている場合に、ユーザーが「外側」チェックボックスをチェックすると、「内側」のチェックが外れるはずですが、テキストエリアが有効なままになることです。これは、ユーザーが「内部」チェックボックスを実際にクリックしなかったことが原因のようです。

私はこれを次のように回避しようとしました：

$(function(){
  //mutually exclusive checkboxes
  $("input[data-gid]").click(function(){
    var gid = $(this).attr('data-gid');
    var fid = $(this).attr('id');
    var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
    checkboxes.attr("checked", false);
    checkboxes.triggerHandler("click"); //new code to fire any click code associated with unchecked boxes
   });
});

しかし、2 つの異なるクリック イベントが互いに呼び出してしまうため、これはブラウザをループに陥らせるだけです。

「内部」チェックボックスの有効化/無効化コードを機能させながら、相互に排他的なコードを保持するにはどうすればよいですか?

4

2 に答える 2

1

#application_insideをクリックしたときにトリガーするカスタム イベントを作成できます。また、排他性のために他のボックスのチェックを外すと、このカスタム イベントが発生します。

以下に例を示します: http://jsfiddle.net/gs78t/2/

于 2012-04-19T15:50:34.173 に答える
0

あなたはこのようなことを試すことができます

var insideChanged = function() {
    if ($('#inside').is(':checked')) {
      return $('textarea').removeAttr('disabled');
    } else {
      return $('textarea').attr('disabled', 'disabled');
    }
};

$('#application_inside').click(insideChanged);

$(function(){
  //mutually exclusive checkboxes
  $("input[data-gid]").click(function(){
   var gid = $(this).attr('data-gid');
    var fid = $(this).attr('id');
    var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
    checkboxes.attr("checked", false);
    insideChanged(); //new code to fire any click code associated with unchecked boxes
   });
});
于 2012-04-19T15:22:20.063 に答える