CODEWITHSUNDEEP
javascriptjquery
Dhawal Mhatre
Dhawal Mhatre

Reputation: 435

Enable input box on radio button click

I have below code for grid view in PHP

<table>
  <tr>
    <td>
     <input type="radio" name="planId" id="planId1" value="1">
     <label for="planId1">Plan 1</label>
  </td>
  <td>$5 <label>per month</label></td>
  <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
</tr>
<tr>
  <td>
     <input type="radio" name="planId" id="planId2" value="1">
     <label for="planId1">Plan 2</label>
  </td>
  <td>$5 <label>per month</label></td>
  <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId2" min="1" maxlength="2" value="1" disabled></td>
</tr>
<tr>
  <td>
     <input type="radio" name="planId" id="planId3" value="1">
     <label for="planId1">Plan 3</label>
  </td>
  <td>$5 <label>per month</label></td>
  <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
 </tr>
 </table>

The above 'tr' can be multiple on basic of DB data. My requirement is that whenever I click on Radio button the input text field disabled should be false.

Please let know how can I achieve this, the number of rows can be up to 10. Below is the script i have written

$('input:radio').change(function() {
   if($(this).is(":checked")) 
        $(this).parent().find("input:text").attr("disabled",false);
});

Upvotes: 0

Views: 96

Answers (2)

guradio
guradio

Reputation: 15565

  1. use closest('tr')
  2. use class of the input when using find()
  3. to select type of number use "input[type=number]"

$('input:radio').change(function() {

  if ($(this).is(":checked"))
  $(this).closest('table').find("input[type=number]").not(this).attr("disabled", true);
    $(this).closest('tr').find("input[type=number]").attr("disabled", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="radio" name="planId" id="planId1" value="1">
      <label for="planId1">Plan 1</label>
    </td>
    <td>$5 <label>per month</label></td>
    <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="planId" id="planId2" value="1">
      <label for="planId1">Plan 2</label>
    </td>
    <td>$5 <label>per month</label></td>
    <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId2" min="1" maxlength="2" value="1" disabled></td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="planId" id="planId3" value="1">
      <label for="planId1">Plan 3</label>
    </td>
    <td>$5 <label>per month</label></td>
    <td class="input-field col m6 subForm"><input type="number" name="monthTxt" id="monthTxt" class="planId1" min="1" maxlength="2" value="1" disabled></td>
  </tr>
</table>

Upvotes: 1

Navoneel Talukdar
Navoneel Talukdar

Reputation: 4608

So like this?

$('input:radio').change(function() {
    if($(this).is(":checked")) {
       $(this).parent("td").nextAll().eq(1).find("input:text").attr("disabled", false);
    }
});

nextAll here tries to traverse the next sibling elements and the input element lies inside the second sibling td so use eq(1).

Upvotes: 1

Related Questions