Блог

Главная - Вопросы по программированию - Отключить кнопки в таблице на основе значений в первом столбце

Отключить кнопки в таблице на основе значений в первом столбце

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть скрытое поле со значениями 1,7. Я хочу отключить определенные кнопки в таблице, если значения в столбце1 говорят 1 или 7. Я начал писать функцию jquery, но в итоге она отключает все кнопки. Как я могу достичь своей цели

введите описание изображения здесь

 <!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
         border: 1px solid black;
         border-collapse: collapse;
         }
         th, td {
         padding: 15px;
         text-align: left;
         }
         #t01 {
         width: 100%;    
         background-color: #fff;
         }
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>
   <body>
    <input type="hidden" id="hdn_numbers" name="hdn_numbers" value="1,7">
   
<table class="table table-striped">
  <thead>
    <tr class="warning">
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>7</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
  </tbody>
</table>
      <script>           
       $(function(){
          $("table tbody tr td:not(:eq(1))").find("select,input").prop("disabled",true);
       });
      </script> 
   </body>
</html>

Ответ №1:

Один из подходов, использующий jQuery, заключается в следующем:

 // creating an Array of the values that should cause the <input>
// to be disabled:
const disableValues = [1, 7];

// here we find all the <input> elements in the td:last-child element
// within the <tbody>:
$('tbody td:last-child input')

  // and use the prop() method to update the value of the
  // 'disabled' property:
  .prop('disabled', function() {

    // here we navigate from the current <input> to the closest
    // ancestor <tr> element and from there find the td:first-child
    // element and retrieve its text:
    let firstColValue = $(this).closest('tr').find('td:first-child').text();

    // here we return whether Boolean true (if the numeric value of the
    // text in the first <td> is included in the array of values) or
    // false (if that value is not in the array of values):
    return disableValues.includes( firstColValue);
});  
 table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  text-align: left;
}

#t01 {
  width: 100%;
  background-color: #fff;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="hidden" id="hdn_numbers" name="hdn_numbers" value="1,7">

<table class="table table-striped">
  <thead>
    <tr class="warning">
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>7</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
    <tr>
      <td>1</td>
      <td>
        test
      </td>
      <td>
        <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit">
      </td>
    </tr>
  </tbody>
</table>

Ссылки:

Комментарии:

1. ВАУ, отличное объяснение! Спасибо

2. Пожалуйста, я рад, что помог! 🙂