Как установить флажок в таблице проверенных? - PullRequest
Новая
       10

Как установить флажок в таблице проверенных?

6 голосов
/ 24 февраля 2020

У меня есть таблица У меня есть id флажка, который я хочу установить как отмеченный, но я не могу этого сделать и не знаю почему.

Я пытаюсь с этим, но ничего не происходит, и у меня нет никаких сообщений об ошибках: 

$('#medicalListTable input.type_checkbox[id="sindicate-345"]').prop('checked', true);
$('input.type_checkbox[id="sindicate-345"]').prop('checked', true);
$('input.type_checkbox[id="sindicate-345"]').attr('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;">
        <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;">
        <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;">
        <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;">
        <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="vehicleId sorting_1">345</td>
      <td class="model">NAME</td>
      <td class="model">SURNAME</td>
      <td>
        <input type="checkbox" id="sindicate-345">
      </td>
    </tr>
  </tbody>
</table>

Ответы [ 3 ]

3 голосов
/ 24 февраля 2020

На элементе нет класса type_checkbox. Я предполагаю, что вы хотели использовать вместо этого селектор атрибута: 

$('#medicalListTable input[type="checkbox"][id="sindicate-345"]').prop('checked', true);

Однако , если у вас есть id на элементе, он должен быть уникальным в DOM, так что единственный селектор, который вам нужно использовать: 

$('#sindicate-345').prop('checked', true);


$('#sindicate-345').prop('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;">
        <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;">
        <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;">
        <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;">
        <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="vehicleId sorting_1">345</td>
      <td class="model">NAME</td>
      <td class="model">SURNAME</td>
      <td>
        <input type="checkbox" id="sindicate-345">
      </td>
    </tr>
  </tbody>
</table>
1 голос
/ 24 февраля 2020

Вы можете достичь на 

$('#sindicate-345').attr('Checked','Checked');


$('#sindicate-345').attr('Checked','Checked');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;">
      <thead>
        <tr role="row">
          <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;">
            <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
          </th>
          <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;">
            <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
          </th>
          <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;">
            <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
          </th>
          <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;">
            <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr role="row" class="odd">
          <td class="vehicleId sorting_1">345</td>
          <td class="model">NAME</td>
          <td class="model">SURNAME</td>
          <td>
            <input type="checkbox" id="sindicate-345">
          </td>
        </tr>
      </tbody>
    </table>

или 

$("#sindicate-345").prop("checked", true);


$("#sindicate-345").prop("checked", true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;">
        <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;">
        <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;">
        <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
      <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;">
        <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr role="row" class="odd">
      <td class="vehicleId sorting_1">345</td>
      <td class="model">NAME</td>
      <td class="model">SURNAME</td>
      <td>
        <input type="checkbox" id="sindicate-345">
      </td>
    </tr>
  </tbody>
</table>
1 голос
/ 24 февраля 2020

В качестве атрибута id является уникальным в документе, вы можете просто использовать это: 

$('#sindicate-345').attr('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="medicalListTable" class="display responsive nowrap dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="medicalListTable_info" style="width: 100%;">
<thead>
    <tr role="row">
        <th class="sorting ui-state-default sorting_asc" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Id empleado: activate to sort column descending" style="width: 134px;">
            <div class="DataTables_sort_wrapper">Id empleado<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div>
        </th>
        <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Nombre: activate to sort column ascending" style="width: 174px;">
            <div class="DataTables_sort_wrapper">Nombre<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
        </th>
        <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Apellidos: activate to sort column ascending" style="width: 329px;">
            <div class="DataTables_sort_wrapper">Apellidos<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
        </th>
        <th class="sorting ui-state-default" tabindex="0" aria-controls="medicalListTable" rowspan="1" colspan="1" aria-label="Seleccionar: activate to sort column ascending" style="width: 125px;">
            <div class="DataTables_sort_wrapper">Seleccionar<span class="DataTables_sort_icon css_right ui-icon ui-icon-caret-2-n-s"></span></div>
        </th>
    </tr>
</thead>
<tbody>
    <tr role="row" class="odd">
        <td class="vehicleId sorting_1">345</td>
        <td class="model">NAME</td>
        <td class="model">SURNAME</td>
        <td>
            <input type="checkbox" id="sindicate-345">
        </td>
    </tr>        
</tbody>
</table>
...