Disable button if textboxes are empty for all the records in a table

Question

I have a table in which I have 2 textboxes & a button and I want to disable the button if any of the textboxes are empty.

I have used the following jquery to do so -

$(document).ready(function () {

    var rdata = $('.chcktbl5').attr("id");

    $('#txtwifiuserid_' + rdata).keyup(function () {
        if ($(this).val().length != 0 && $('#txtwifipass_' + rdata).val().length != 0)
            $('#btnSendSMS').attr('disabled', false);
        else
            $('#btnSendSMS').attr('disabled', true);
    })

    $('#txtwifipass_' + rdata).keyup(function () {
        if ($(this).val().length != 0 && $('#txtwifiuserid_' + rdata).val().length != 0)
            $('#btnSendSMS').attr('disabled', false);
        else
            $('#btnSendSMS').attr('disabled', true);
    })
});

But the problem I am having is that this is only working for the first record of the table, not for all the records.

So, what should I do instead to do this thing for all the records of the table?

Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Mar 13 '18 at 15:54
@RajanBenipuri If I'll use class instead, buttons on all record will be disabled/enabled on any of the record's textboxes change. — Suyash Gupta, Mar 13 '18 at 15:58
That's why you use contextual lookups. Regardless, you should not repeat ids. — Taplar, Mar 13 '18 at 16:01

Jonathan Hamel · Accepted Answer · 2018-03-13T16:13:10.600

You will need to use classes instead of IDs.

$(document).ready(function () {

    $('.textarea').keyup(function () {
      var tableRow = $(this).closest("tr")
      var disable = !!tableRow.find(".textarea").toArray().find((textarea) => { return textarea.value.length === 0});
      tableRow.find('.btnSend').first().attr('disabled', disable);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="button" class="btnSend" value="Send" disabled/></td>
    <td><textarea class="textarea"></textarea></td>
    <td><textarea class="textarea"></textarea></td>
   </tr>
   <tr>
    <td><input type="button" class="btnSend" value="Send" disabled/></td>
    <td><textarea class="textarea"></textarea></td>
    <td><textarea class="textarea"></textarea></td>
   </tr>
 </table>

Disable button if textboxes are empty for all the records in a table

1 Answers1