How can I add “disabled” attribute to text field based on dropdown selection in a table?

Question

I'm tring to have a field in each row only necessary if specific dropdown in that row is selected. So if value 1 is selected then it is disabled.

Here's what I have:

Jquery:

<script>
    $(document).ready(function () {
        $('.Selecter').change(function () {
            var $this = $(this); 
            var $row = $this.closest("tr").find('.accountNumber');
            if (this.value == "1") {
                $('#row').attr("disabled", "disabled");
            } else {
                return false;
            }
        });
    });

</script>

HTML:

<table>
<tr>
<td>
<select id="Select1" class="Selecter">
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>

</select>
</td>
<td>
<input type="text" class="accountNumber"/>
</td>
</tr>

<tr>
<td>
<select id="select2" class="Selecter">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>

</select>
</td>
<td>
<input type="text" class="accountNumber" />
</td>
</tr>
</table>

Fiddle: https://jsfiddle.net/8efeyhc5/2/

Answer 1

Try this:

Jsfiddle: https://jsfiddle.net/vLx658of/

 $(document).ready(function () {
        $('.Selecter').change(function () {
            var $this = $(this); 
            console.log($this.val())
            var $row = $this.closest("tr").find('.accountNumber');
            if ($this.val() == "1") { // use $this.val()
                $row.attr("disabled", "disabled"); // use $row here because you want to disable selected row field
            } else {
                return false;
            }
        });
    });

Answer 2

• Use $row while applying .attr method as there is no $('#row') element in DOM
• Use .prop instead of .attr
• If condition could be eliminated by $row.prop("disabled", this.value == "1");
• Use .change() to invoke the handler initially.

---

$('.Selecter').change(function() {
  $(this).closest("tr").find('.accountNumber').prop("disabled", this.value == "1");
}).change();

 $('.Selecter').change(function() { $(this).closest("tr").find('.accountNumber').prop("disabled", this.value == "1"); }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table> <tr> <td> <select id="Select1" class="Selecter"> <option value="">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </td> <td> <input type="text" class="accountNumber" /> </td> </tr> <tr> <td> <select id="select2" class="Selecter"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </td> <td> <input type="text" class="accountNumber" /> </td> </tr> </table> 

Fiddle Demo

Answer 3

You can do,

$('.Selecter').change(function() {
  var val = $(this).val();
  if (val == 1) {
    $(this).closest("tr").find(".accountNumber").prop("disabled", true);

  } else {
    $(this).closest("tr").find("accountNumber").prop("disabled", false);
  }
});

Fiddle

Problem with your code is, you are taking the current row's account number to a variable called $row , But in the next line you just using the selector '#row' which dont have any relation with the previous line.