Balu Balu - 4 months ago 9
Javascript Question

Unable to disble the sibling from table row

I am trying to disable the input type from adjacent columns when a checkbox is checked for that row. I have tried as below but unable to disable. Please have a look and suggest how to disable.



$("input:checkbox[class=associationcheckbox]").each(function() {
var index;
$(this).on('click', function() {
if ($(this).prop('checked')) {
$(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false);
} else {
$(this).closest('td').siblings('td.associationCheckbox1').prop("disabled", false);
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>

<body>
<h1>Hello Plunker!</h1>
<table>
<tr>
<td>Balu</td>
<td>
<input class="associationCheckbox" type="checkbox" name="Balu" />
</td>
<td>
<input class="associationCheckbox1" type="number" name="Balu" value="0" />
</td>
</tr>
<tr>
<td>Balu</td>
<td>
<input class="associationCheckbox" type="checkbox" name="Balu" />
</td>
<td>
<input class="associationCheckbox1" type="number" name="Balu" value="0" />
</td>
</tr>
<tr>
<td>Balu</td>
<td>
<input class="associationCheckbox" type="checkbox" name="Balu" />
</td>
<td>
<input class="associationCheckbox1" type="number" name="Balu" value="0" />
</td>
</tr>
</table>
</body>
</html>




Answer

Your selectors are a little all over the place. The cases of the classes need to match, you don't need the each() and you're trying to select the td by the class of the input, which will never work. You also set disabled to false in both sides of the if condition, but I assume that's just a typo.

To achieve what you need you can just add a single click handler to the checkbox by class, and find it's related textbox and set it as disabled/enabled based on the checked property. Try this:

$(".associationCheckbox").on('click', function() {
    $(this).closest('tr').find('.associationCheckbox1').prop("disabled", this.checked);
});
<!DOCTYPE html>
<html>
<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
  <h1>Hello Plunker!</h1>
  <table>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
    <tr>
      <td>Balu</td>
      <td>
        <input class="associationCheckbox" type="checkbox" name="Balu" />
      </td>
      <td>
        <input class="associationCheckbox1" type="number" name="Balu" value="0" />
      </td>
    </tr>
  </table>
</body>

</html>

I would also suggest you change the class of the textbox as associationCheckbox1 is a little confusing.

Comments