rselvaganesh rselvaganesh - 5 months ago 15
Javascript Question

How to disable row form elements present in second and third column using jquery

I want to disable second row,third row,till nth row form elements which is present in second and third column using jquery selector.

<table class="table table-striped">
<thead>
<tr class="warning">
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>500.00</td>
<td>
<select class="form-control" id="ddcards">
<option selected>Select Card</option>
<option>CC0</option>
<option>CC1</option>
<option>CC2</option>
</select>
</td>
<td>
<input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
</td>
</tr>
<tr>
<td>500.00</td>
<td>
<select class="form-control" id="ddcards">
<option selected>Select Card</option>
<option>CC0</option>
<option>CC1</option>
<option>CC2</option>
</select>
</td>
<td>
<input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
</td>
</tr>
<tr>
<td>500.00</td>
<td>
<select class="form-control" id="ddcards">
<option selected>Select Card</option>
<option>CC0</option>
<option>CC1</option>
<option>CC2</option>
</select>
</td>
<td>
<input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
</td>
</tr>
</tbody>
</table>


Below is the sample screen enter image description here

Want to disable to row with the form elements which is present in the column
till nth row

Prs Prs
Answer

You could use any of these

$("table tbody tr").slice(1).find('input,select').prop('disabled', true);

or

$("table tbody tr:not(:eq(0))").find('input,select').prop('disabled', true);

or

$("table tbody tr").gt(0).find('input,select').prop('disabled', true);

$("table tbody tr").slice(1).find('input,select').prop('disabled', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr class="warning">
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" id="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
      <td>
        <input type="submit" class="btn btn-primary" id="btnSubmit" value="submit">
      </td>
    </tr>
  </tbody>
</table>

Comments