Как мне манипулировать клоном jQuery, чтобы удалить атрибут

Question

У меня есть таблица со строками, в которой данные заполняются через foreach.

Я использую :last selector для выбора элемента и clone для добавления новой строки. Принимая во внимание использование remove для удаления строк.

При заполнении результата с помощью foreach я отключил несколько полей, я ищу обходной путь, как удалить атрибут disabled для конкретного элемента.

Предварительно заполнили данные для простоты

$("#add_row").on("click", function (e) {
  var $tableBody = $('#tab_logic').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();
    $trLast.after($trNew);
 });

 $("#delete_row").click(function () {
    $('#tab_logic #tab_logic_body tr:last').remove();
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
    <thead class="orange ">
        <tr>
            <th>
                Product Name
            </th>
            <th>
                HSN Code
            </th>
            <th class="center">
                GST
            </th>
            <th>
                Quantity
            </th>
            <th>
                Rate(per Nos)
            </th>
            <th>
                Amount
            </th>
        </tr>
    </thead>
    <tbody id="tab_logic_body">
        @foreach ($invoice_details as $items) // Can be ignored
        <tr>
            <td>
                <input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled>
            </td>
            <td>
                <div class="col s12">
                    <div class="row">
                        <div class="input-field col s12">
                            <input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE">
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="col s12">
                    <div class="row">
                        <div class="input-field col s12">
                            <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]"
                                readonly="readonly" value="18">
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="col s12">
                    <div class="row">
                        <div class="input-field col s12">
                            <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty"
                                step="0" min="0" value="1" />
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="col s12">
                    <div class="row">
                        <div class="input-field col s12">
                            <input type="number" name='product_price[]' placeholder='Enter Price'
                                class="form-control product_price" step="0" min="0" value="100" />
                        </div>
                    </div>
                </div>
            </td>

            <td>
                <div class="col s12">
                    <div class="row">
                        <div class="input-field col s12">
                            <input type="number" name='row_total_amount[]' placeholder='Total Amount'
                                class="form-control row_total_amount" step="0" min="0" value="118" />
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>
            <th class="right">
                <button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i>
                </button>
                <button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i>
                </button>
            </th>
            </th>
        </tr>
    </thead>
</table>

Answer 1

Для этого вы можете использовать find() в $trNew, чтобы получить все отключенные элементы управления формой. Затем вы можете использовать prop('disabled', false), чтобы включить их снова:

$trNew.find(':input[disabled]').prop('disabled', false);

$("#add_row").on("click", function(e) {
  var $tableBody = $('#tab_logic').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();
  $trLast.after($trNew);
  $trNew.find(':input[disabled]').prop('disabled', false);
});

$("#delete_row").click(function() {
  $('#tab_logic #tab_logic_body tr:last').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" id="tab_logic">
  <thead class="orange ">
    <tr>
      <th>Product Name</th>
      <th>HSN Code</th>
      <th class="center">GST</th>
      <th>Quantity</th>
      <th>Rate(per Nos)</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody id="tab_logic_body">
    <tr>
      <td>
        <input type="text" class="product_name autocomplete" placeholder="" value="Product Name" disabled>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="hsn_code autocomplete" placeholder="" value="HSNCODE">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18">
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name='quantity[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="1" />
            </div>
          </div>
        </div>
      </td>
      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name='product_price[]' placeholder='Enter Price' class="form-control product_price" step="0" min="0" value="100" />
            </div>
          </div>
        </div>
      </td>

      <td>
        <div class="col s12">
          <div class="row">
            <div class="input-field col s12">
              <input type="number" name='row_total_amount[]' placeholder='Total Amount' class="form-control row_total_amount" step="0" min="0" value="118" />
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>
        <th class="right">
          <button type="button" class="btn z-depth-1" id="add_row"><i class="material-icons">add_box</i></button>
          <button type="button" class="btn z-depth-1 red" id="delete_row"><i class="material-icons">remove</i></button>
        </th>
      </th>
    </tr>
  </thead>
</table>