Question

我想使用jquery选择器禁用第二行，第三行，直到第n行表单元素，这些元素存在于第二列和第三列中。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<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>

＆＃13;

以下是示例屏幕 enter image description here

要禁用与列中存在的表单元素一起行直到第n行

一个重要条件，例如点击按钮1启用第2行，然后点击第二个按钮启用第3行...同样继续

Answer 1

试试这个：

$('.table > tbody tr:not(:first)').find('input,select,button').prop("disabled", true);

或更好的方法：

var leaveTr= '1';
$('.table > tbody tr').not(':eq('+leaveTr+')').find('input,select,button').prop("disabled", true);

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

Answer 2

使用下面的jquery code即可。

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

<强> Working Fiddle

Answer 3

试试这个，

$(document).ready(function(){
$(".table").each(function(){
    $(this).find('.form-control,.btn').prop('disabled',true);
    $(this).find('.form-control:first,.btn:first').prop('disabled',false);
});
});

Answer 4

您可以使用其中任何一种

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

或

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

或

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

＆＃13;

$("table tbody tr").slice(1).find('input,select').prop('disabled', true);
$('input[type="submit"]').on('click', function() {
  $(this).parents('tr').next().find('input, select').prop('disabled', false);
})

＆＃13;

<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>
    <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>

＆＃13;

Answer 5

您可能需要一个表单，其中只有一行可供用户将未选择的值更改为选定的值。为了达到这个目的，我建议您不要禁用行控件，但要完全隐藏行，直到用户在其上方的行中选择了一个值。

您还可能想要处理用户首先填写所有行的情况，然后重置第一行上的选择。在这种情况下，向上移动所有选定的值以使未选择的行位于其他行之后可能会很好。

最后，在每一行上提交按钮似乎没什么用。用户进行选择的这一事实应该足够并且触发下一行变得可见。这更加用户友好。

以下是如何实现这一目标：

＆＃13;

$(function() {
  function showRows() {
    // remove gaps
    $targetRows = $('.table-striped>tbody>tr');
    targetIndex = 0;
    $targetRows.each(function (index) {
      var $select = $(this).find('select.form-control');
      var selectedIndex = $select.prop('selectedIndex');
      if (targetIndex < index) {
        $targetRows.eq(targetIndex).find('select.form-control')
        .prop('selectedIndex', selectedIndex);
        $select.prop('selectedIndex', 0);
      }
      if (selectedIndex) targetIndex++;
    });
    targetIndex++;
    // show/hide rows, so only last one that is visible has unselected value
    $targetRows.slice(targetIndex).hide();
    $targetRows.slice(0,targetIndex).show();
  }

  $('.form-control').change(showRows);
  showRows();
});

＆＃13;

<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>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>500.00</td>
      <td>
        <select class="form-control" name="ddcards">
          <option selected>Select Card</option>
          <option>CC0</option>
          <option>CC1</option>
          <option>CC2</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

查看选择值后行如何显示，以及撤消选择时如何隐藏这些行，将值移到需要的位置。

请注意，我会将id属性替换为name属性，以避免id重复，这在HTML中是不允许的。

如何使用jquery

5 个答案: