Question

嗨朋友我有很多Div，每个div都很少<li>每个<li>都有一个复选框。我希望用户选中任何复选框，然后其他人的复选框div仅禁用复选框，复选框的兄弟姐妹不会被禁用 enter image description here

根据我目前的代码，用户可以根据我的要求检查任何行中的任何错误。您可以查看下面的代码或 check fiddle here

HTML

<ul id="gridFriend">
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>  </li>
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>

</ul>



<ul id="gridFriend">
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>
  <li>

    <div class="checkBox">
      <input name="" type="checkbox" value="" />
    </div>
    <div class="pic"><a href="SendGifts.aspx?fnd=1053103047&amp;fb=y&amp;src=ALL"><img width="94" height="93" src="https://graph.facebook.com/1053103047/picture?width=94&amp;height=93" alt=" "></a></div>

  </li>

</ul>

SCRIPT

var mergeFriend = 0;
$('ul#gridFriend input').on('change', function () {
    if ($(this).is(':checked')) {
        mergeFriend++;
    } else {
        mergeFriend--;
    }
     if (mergeFriend >= 3) {
        $('ul#gridFriend input:not(:checked)').attr("disabled", "disabled");
        $('ul#gridFriend input:not(:checked)').closest('li').animate({opacity:'0.2'},1000);
        //$('.blkSheet').css('display','block');
    } else {
        $('ul#gridFriend input:not(:checked)').removeAttr("disabled");
        $('ul#gridFriend input:not(:checked)').closest('li').animate({opacity:'1'},200);
        /*$('.friendMergeCont').animate({bottom:'-100px'},200)
        $('.blkSheet').css('display','none');*/
       }
    /* $('.friendMergeCont span.close').click(function(){        

        $('.friendMergeCont').animate({bottom:'-100px'},200)
        //$('.blkSheet').css('display','none');
         }) */
/*  if (mergeFriend == 2) {
        $('.friendMergeCont').animate({bottom:'0'},200)
    }else if (mergeFriend == 1) {
        $('.friendMergeCont').animate({bottom:'-100px'},200)
    }   */

});

Answer 1

单个页面上多个elems的相同ID是无效标记，肯定会导致浏览器出现问题，因此要解决此问题，您可以将id='gridFriend'更改为class='gridFriend'：

<ul class="gridFriend">
 .......
</ul>

然后在jQuery中你可以这样做：

$('.gridFriend :checkbox').on('change', function () {
  var $check = $(this);
  $check.closest('.gridFriend').siblings('.gridFriend').find(':checkbox').prop('disabled', true)
  $check.closest('.gridFriend').siblings('.gridFriend').find('li').animate({
    opacity: '0.2'
  }, 1000);
  if ($(':checked').length == 3) {
    $check.closest('.gridFriend').find(':not(:checked)').prop('disabled', true);
    $('li:has(:checkbox:not(:checked))').animate({
        opacity: '0.2'
    }, 1000);
  }
});

Fiddle

Answer 2

将您的代码更改为：

var mergeFriend = 0;
$('ul#gridFriend input').on('change', function () {
    if ($(this).is(':checked')) {
        mergeFriend++;
    } else {
        mergeFriend--;
    }
     if (mergeFriend >= 3) {
        $(this).closest('ul#gridFriend').find("input:not(:checked)").attr("disabled", "disabled");
       $(this).closest('ul#gridFriend').find("input:not(:checked)").closest('li').animate({opacity:'0.2'},1000);
        //$('.blkSheet').css('display','block');
    } else {
        $('ul#gridFriend input:not(:checked)').removeAttr("disabled");
        $('ul#gridFriend input:not(:checked)').closest('li').animate({opacity:'1'},200);
        /*$('.friendMergeCont').animate({bottom:'-100px'},200)
        $('.blkSheet').css('display','none');*/
       }
    /* $('.friendMergeCont span.close').click(function(){        

        $('.friendMergeCont').animate({bottom:'-100px'},200)
        //$('.blkSheet').css('display','none');
         }) */
/*  if (mergeFriend == 2) {
        $('.friendMergeCont').animate({bottom:'0'},200)
    }else if (mergeFriend == 1) {
        $('.friendMergeCont').animate({bottom:'-100px'},200)
    }   */

});

Answer 3

我认为如果你只想要一个答案（不明白你的问题），最好使用Radio Buttons而不是Checkboxes。请查看此链接以获取Radio Buttons的示例。

使用jQuery禁用复选框

3 个答案:

Fiddle