CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-table
FullyHumanProgrammer
FullyHumanProgrammer

Reputation: 101

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.

Does anyone know of a good way to go about this?

<tr>
    <td>Text A</td>
    <td>Text B</td>
    <td><input class="editable"></td>
    <td>Text C</td>
    <td><input class="editable></td>
    <td>Text D</td>
    <td><button class="disableInput">OK</button></td>
<tr>

I have ~40 rows like this

Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds

Upvotes: 0

Views: 2128

Answers (3)

Mohan
Mohan

Reputation: 4829

You can do this via traversing the DOM.

$('.disableInput').on('click',function(){                      
     var input = $(this).closest('tr').find('input');
     var currstatus = input.prop('disabled');
     input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
     <td><input type="text" name="somthing[]"></td>
     <td><input type="text" name="something[]"></td>
     <td><button class="disableInput">Toggle Input</button></td>
  </tr>
   <tr>
     <td><input type="text" name="somthing[]"></td>
     <td><input type="text" name="something[]"></td>
     <td><button class="disableInput">Toggle Input</button></td>
  </tr>
   <tr>
     <td><input type="text" name="somthing[]"></td>
     <td><input type="text" name="something[]"></td>
     <td><button class="disableInput">Toggle Input</button></td>
  </tr>
</table>

Upvotes: 0

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

Since you are using jQuery, you can do something like this:

$(document).ready(function() {
  $("table td .btn").click(function() {
    if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
      $(this).closest("tr").find("input").removeAttr("disabled", "disabled");
      $(this).closest("tr").find("button").text("Disbale");
    }  
    else{
      
      $(this).closest("tr").find("input").attr("disabled", "disabled");
      $(this).closest("tr").find("button").text("Enable");
     } 
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text" />
      </td>
      <td>
        <input type="text" />
      </td>
      <td>
        <button class="btn" type="button" />Disable</button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" />
      </td>
      <td>
        <input type="text" />
      </td>
      <td>
        <button class="btn" type="button" />Disable</button>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" />
      </td>
      <td>
        <input type="text" />
      </td>
      <td>
        <button class="btn" type="button" />Disable</button>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Liviu Boboia
Liviu Boboia

Reputation: 1754

$(tableId).on("click", "button", function(){
    $(this).closest("tr").find("input").attr("disabled", true);
})

Upvotes: 5

Related Questions