4

私はいくつかの部門を持っています。それぞれに 2 つのチェックボックスが含まれています (各チェックボックスは同じクラス「class3」の div にあります)。ユーザーが最初のチェックボックスをチェックすると、2番目のチェックボックスがチェックされて無効になります。私は試してみました：

 $('.class1').live('click', function () {
var n = $(this).siblings('input:checkbox');
if ($(this).attr('checked')) {
    n.attr('disabled', true); 
} else {
    n.attr('disabled',false);
} 
return false;
});

このように 2 つのチェックボックスが有効になっていますが、最初のチェックボックスをクリックしてもチェックが表示されず、何も起こりません。

 <div class="elements">
 <div class="class3">
 <input class="class1" type="checkbox" value="1" name="first" id="first" />
 </div>
 <div class="class3">
 <input class="class2" type="checkbox" value="1" name="second" id="second" />
 </div>
 </div>
4

3 に答える 3

1

次のようなものを使用して、class1 の div の最初の各チェックボックスにイベントを添付できます。

  $('.class1 input:first-child').live('change', function () {

(クリックの代わりに変更を使用しました。これはもう少し一般的なためです。) div 全体ではなく、最初の要素のみをアタッチすることで、必要な場合にのみ反応するようになります。

さらに、使用した無効化は機能するはずですが、兄弟は、最初のチェックボックスが別の要素 (たとえば、段落) 内にネストされていない場合にのみ機能します。

フィドルの例: http://jsfiddle.net/Zqz63/

編集 更新された投稿で html を見ると、兄弟は実際には機能しません。親チェーンを調べて .elements div を見つけ、そこからチェックボックス (選択したもの以外) を探すことができます。

 var n = $(this).parents('.elements').find('input:checkbox').not(this);

jsfiddle は応答しないので、サンプルを jsbin に移動しました: http://jsbin.com/ahemet/3/edit (NB、現在の jsbin バージョンでは、最初のチェックボックスのみを適切に選択できないため、イベントは2番目のチェックボックスでも起動しますが、それはあなたの質問の範囲外だと思いました）

edit 2 class1 が常に最初のチェックボックスであり、class2 が常に 2 番目であるという情報を使用します。

$('input:checkbox.class1').live('change', function () {

  var n = $(this).parents('.elements').first().find('input:checkbox.class2');

  if ($(this).attr('checked')) {
      n.attr('checked',true);
      n.attr('disabled', true);
  } else {
      n.attr('disabled',false);
  }
});

テスト: http://jsbin.com/ahemet/4/edit

于 2012-06-28T08:45:10.637 に答える
0

return false;そのイベントのデフォルトの動作が発生しないようにすると、チェックボックスをクリックした場合、デフォルトの動作はチェックボックスをチェックすることです。return false;それはあなたにとって何のプラスにもならないので、単に削除してください。

また、disabledは要素のプロパティ.prop()であるため、関数ではなく、関数を使用して値を設定/変更する必要があり.attr()ます。

于 2012-06-28T08:23:38.620 に答える
0 
$('.class1').live('click', function () {
    var n = $(this).siblings('input:checkbox');
    if ($(this).attr('checked')) {
        n.prop('disabled', true); 
    } else {
        n.prop('disabled', false);
    } 
});
于 2012-06-28T08:23:44.377 に答える