How can I enable/disable a checkbox next to another checkbox?

Question

If I check one of the left checkboxes, I want that the checkbox right next to it will be enabled. If I uncheck one of the left checkboxes, the checkbox right next to it should be disabled again:

$('input[type="checkbox"]').change(function () {
   $("input:checkbox:checked:not(.delivery)").each(function () {
      if ($("input:checkbox:checked").length > 0) {
        $(this).closest("tr").children('.disable').removeAttr("disabled");
      } else {
         $(this).closest("tr").children('.disable').addAttr("disabled");
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
   <td><input  type="checkbox"></td>
   <td><input class="disable" disabled="" type="checkbox"></td>
</tr>
<br>
<tr>
  <td><input  type="checkbox"></td>
  <td><input class="disable" disabled="" type="checkbox"></td>
</tr>

With my code, it keeps disabled.

Answer 1

Here you go with a solution https://jsfiddle.net/b5bdjndf/

$('input[type="checkbox"]').on('change', function(){
  if($(this).is(':checked')){
  	$(this).closest('td').next('td').find('input[class="disable"]').removeAttr('disabled');
  } else {
  	$(this).closest('td').next('td').find('input[class="disable"]').attr('disabled', 'disabled');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
     <td><input type="checkbox"></td>
     <td><input class="disable" disabled="" type="checkbox"></td>
  </tr>
  <br>
  <tr>
    <td><input type="checkbox"></td>
    <td><input class="disable" disabled="" type="checkbox"></td>
  </tr>

</table>

Since your checkbox is inside a td, you need to traverse to td then to next td & find the checkbox.

Hope this will help you.

Answer 2

Another solution (using your existing markup), we can attach change event to the checkboxes that are enabled on DOM ready.

On change event, get the list of all checkboxes in the row, exclude the current checkbox that is clicked and then change the disabled attribute of another checkbox based on current checkbox selection.

$(function () {
	$('input[type="checkbox"]:enabled').change(function () {
		$(this).closest("tr").find("input:checkbox").not(this).attr('disabled',!this.checked)
	});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
	<tr>
		<td><input type="checkbox"></td>
		<td><input class="disable" disabled="" type="checkbox"></td>
	</tr>
	<br>
	<tr>
		<td><input type="checkbox"></td>
		<td><input class="disable" disabled="" type="checkbox"></td>
	</tr>
</table>

Answer 3

It is easier if you can give the first checkbox and the second checkbox separate classes, i.e.:

<tr>
    <td><input class="checkbox-parent" type="checkbox"></td>
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td>
</tr>

Then, we can simply bind event listeners to the first checkbox, .checkbox-parent in this case. When it is checked, we disable its associated child by traversing through the DOM. This is done by finding the nearest <tr> element, and then selecting the .checkbox-child. To enable/disable checkboxes, you can simply use .prop('disabled', <boolean>).

$('.checkbox-parent').change(function() {
  // Traverse the DOM to get associated child checkbox
  var $child = $(this).closest('tr').find('.checkbox-child');

  // Update child state based on checked status
  // - set disabled to false when is checked
  // - set disabled to true when is unchecked
  $child.prop('disabled', !this.checked);
});

You should not be using .removeAttr() or even use .attr() to manipulate boolean attributes, such as checked, selected, multiple, disabled, and etc.

---

If you cannot change your markup...

Alternatively, if your markup cannot be changed, you can select the first (use .first() or .eq(0)) and second/last checkbox (use .eq(1) for second, .last() for last) in the table row.

Note that this is not the best solution out there, because changes to your markup will mean that you will have to modify these hardcoded magic constants and logic.

// Bind change event to the FIRST checkbox
$('tr input[type="checkbox"]').first().change(function() {

  // Get the SECOND checkbox
  var $child = $(this).closest('tr').find('input[type="checkbox"]').eq(1);

  // If you want to get the LAST checkbox, use:
  // var $child = $(this).closest('tr').find('input[type="checkbox"]').last();

  // Update child state based on checked status
  // - set disabled to false when is checked
  // - set disabled to true when is unchecked
  $child.prop('disabled', !this.checked);
});

---

There are some issues with your markup that has to be addressed, too:

• You have to wrap your <tr> in a <table> element, otherwise the browser will simply take all the table elements out of your markup in an attempt to make it semantically correct
• <br /> is not a valid direct child of <table>

See updated code here:

$('.checkbox-parent').change(function() {
  // Traverse the DOM to get associated child checkbox
  var $child = $(this).closest('tr').find('.checkbox-child');
  
  // Update child state based on checked status
  $child.prop('disabled', !this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input class="checkbox-parent" type="checkbox"></td>
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td>
  </tr>
  <tr>
    <td><input class="checkbox-parent" type="checkbox"></td>
    <td><input class="checkbox-child disable" disabled="" type="checkbox"></td>
  </tr>
</table>