0

I want all other checkboxes if one is selected. As far as I can see the code should be working (there are no console errors). What am I doing wrong?

As an added complexity this same event listener may tick other checkboxes; ideally the rows containing any of these checkboxes that become checked should also be disabled.

(".chkbox").on('change', function() {

  var locked = false;
  // var for current row
  var row = $(this).closest('tr').index();

  var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');

  $(this).on('click', function toggleLock(e) {
    e.preventDefault();

    // Make locked true if it was false, or vice-versa
    locked = !locked;

    // And apply that value to the 'disabled' attribute of the checkboxes
    $checkboxes.attr('disabled', locked);
  });
});
<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
Stumbler
  • 2,056
  • 7
  • 35
  • 61

3 Answers3

2

In this demo you can also uncheck and that action will enable each checkboxes in a row

working demo: http://jsfiddle.net/darxide/vpvaseL0/

$('body').on('change' , 'tr input' , function () {

var count_checked = 0;

$(this).parent().parent().find('input:checked').each(function() {
    count_checked++
})

if(count_checked > 0){
    $(this).parent().parent().find('input').each(function () {
        $(this).prop('disabled' , true)
    })
    $(this).removeAttr('disabled')
} else {
    $(this).parent().parent().find("input").removeAttr('disabled')
}
})
Dariusz Majchrzak
  • 1,227
  • 2
  • 12
  • 22
1

You can use .closest().siblings().find().prop() method in this case. Another suggestion is to use group radios: 

$(".chkbox").on('change', function() {
    $(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});

Here this.checked returns boolean value. If checked true and unchecked then false.

The issue seems to me that the way you have written your code that tells to bind the click event on currently clicked check box.

    $(".chkbox").on('change', function() {
        $(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <caption>
    <h5>Selection</h5>
  </caption>
  <tr id="9">
    <td>9.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td>
      <input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
    <td>
      <input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
    </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
Jai
  • 74,255
  • 12
  • 74
  • 103
  • if checked one checkbox in a row the selected one will also be disabled? – Light Aug 22 '15 at 15:44
  • @RakeshSadhula good point. Ideally the selected one should not be disabled to allow users to unselect that option. The disabling is merely client side validation. – Stumbler Aug 22 '15 at 15:49
  • @Stumbler Did you tried this code. See i have added a sample below. With a single chain you can get the desired result. on the day i was on mobile so i wasn't able to put a sample demo. now you can see that that is perfectly working. – Jai Aug 24 '15 at 07:53
  • @RakeshSadhula How come is that? Did you tried this code. I have added a sample you can see how is it going. – Jai Aug 24 '15 at 07:54
  • @Jai i was asking if checked then current will be disable or not your code works fine. – Light Aug 24 '15 at 08:25
  • @RakeshSadhula _if checked one checkbox in a row the selected one will also be disabled?_ where did you say that? – Jai Aug 24 '15 at 08:27
  • @Jai that was my question SO answered that in above comment – Light Aug 24 '15 at 08:31
  • @Jai this is a good answer (and that's why I upvoted it). However ultimately I ended up using Rakesh's answer. – Stumbler Aug 24 '15 at 11:49
1

This should work:

$(".chkbox").click(function(){
    var currentObj = $(this);
    $(this)
        .closest("tr")
        .find(".chkbox").attr("disabled","disabled");
    $(currentObj).removeAttr("disabled");
});

fiddle

Light
  • 1,077
  • 10
  • 33