disable checkbox using jQuery

Question

Hi Friends I have many Div's every div has few <li> there is a check-box in every <li> .I want if any check box is checked by user then others check box in others div's will be disable only check box which are siblings of checked check box will not be disabled enter image description here

As per my current code user can check any checkbox in any line which wrong as per my requirment .You can check my code below or 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)
    }   */

});

Invalid markup same ids are repeated for ul, better to change with class. — Jai
– Jai, Commented Mar 28, 2014 at 7:53
please explain the question clearly... what do you mean by others check box in other div? explain it with div number 1 and 2. — CJ Ramki
– CJ Ramki, Commented Mar 28, 2014 at 8:01
@CJ Ramki for example I Click a checbox in row 1 then in row 2 all the checkbox will be disable — Kamal
– Kamal, Commented Mar 28, 2014 at 8:05

Jai · Accepted Answer · 2014-03-28 09:37:07Z

1

Same ids for multiple elems on a single page is invalid markup and surely can cause some issues in browser, so to overcome this you can change id='gridFriend' to class='gridFriend':

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

then in jQuery you can do this:

$('.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

edited Mar 28, 2014 at 9:37

answered Mar 28, 2014 at 8:09

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

benomatis Over a year ago

think you're the closest, but if I understood well, the OP wants that if you check a checkbox in the first row, the checkboxes in the 2nd row get disabled and vice versa... (though the question is not very clear)

Matt Eno · Accepted Answer · 2014-03-28 08:04:57Z

Change your code to:

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)
    }   */

});

Tom Spee · Accepted Answer · 2014-03-28 08:05:56Z

0

I think it is better to use Radio Buttons instead of Checkboxes if you only want 1 answer (don't understand your question clearly). Check this link for an example of Radio Buttons.

answered Mar 28, 2014 at 8:05

Tom Spee

9,2696 gold badges33 silver badges50 bronze badges

Collectives™ on Stack Overflow

disable checkbox using jQuery

3 Answers 3

Fiddle

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related