如何禁用先前克隆的元素

Question

在我的输入表单中，用户需要能够输入多行数据。我通过进行 ajax 调用来提交信息来实现这一点，然后它将克隆该行并将其附加到我的表体中，以便用户可以输入更多数据。他们可以根据需要多次执行此操作。但是，我希望能够在创建新行时禁用前一个。

这是我目前必须尝试解决的问题。它适用于前两行，因为当我单击第一行上的添加时，它会创建一个新行，并且之前的项目被禁用。但是，当我再次单击添加以创建另一行第三行时，该行将自动禁用。我假设是因为它正在克隆第一行。如果有人对如何解决此问题有任何想法，我们将不胜感激！谢谢！

$('#tableData').on('click', 'button.addRow', (e) => {
        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault();
        let data = {
            project_id: getPid,
            imp_or_ann: $(".imp_or_ann").last().val(),
            category: $(".category").last().val(),
            cost: $(".cost").last().val(),
            hours: $(".hours").last().val()
        }
       
            $.ajax({
                url: '/costs_hours',
                type: 'POST',
                data: data
            }).then(
                cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
                $(".imp_or_ann:not(:last)").attr("disabled", true),  
                $(".category:not(:last)").attr("disabled", true),
                $(".cost:not(:last)").attr("disabled", true),
                $(".hours:not(:last)").attr("disabled", true),
            )
    });

这是 HTML

<div class="row">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Costs and Hours</li>
        </ol>
    </nav>
    <form action='/costs_hours' id="formData" method="POST">
        <div class="card border-secondary w-100 text-light" style="background-color: #333f48">
            <h5 style="background-color: #bf5700;" class="card-header">Costs &amp; Hours</h5>
            <div class="card-body w-100 text-end">
                <div id="errors" class="text-start"></div>
                <table id="tableData" class="table text-light text-center mt-3">
                    <thead>
                        <tr>
                            <th scope="col">Implementation or Annual</th>
                            <th scope="col">Category</th>
                            <th scope="col">Costs</th>
                            <th scope="col">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select name="imp_or_ann" class="form-select imp_or_ann"
                                            id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>Implementation</option>
                                            <option>Annual</option>
                                        </select>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select name="category" class="form-select category" id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>EMO</option>
                                            <option>Analysts</option>
                                            <option>Maintenance</option>
                                            <option>ETS</option>
                                            <option>BOT</option>
                                            <option>OtherUT</option>
                                            <option>Materials</option>
                                            <option>Non-UT Contract</option>
                                            <option>Contingency</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="cost" type="text" class="cost form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="hours" type="text" class="hours form-control">
                                </div>
                            </td>
                            <td>
                                <button type="button" style="background-color: #bf5700;"
                                    class="btn btn-warning text-light addRow"><i
                                        class="fas fa-plus-circle"></i>&nbsp;Add
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row text-center my-3">
                <div class="col-11 text-end">
                    <button disabled id="next" type="button" class='btn btn-success'><a id="link"
                            class="text-white">Next</a>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

问题确实是第一行。您在其中的输入被禁用后克隆它

在页面加载时以及在该行中禁用任何内容之前创建一个clone()。如果第一行有任何预设值，您可以在克隆版本中重置它们

然后根据需要附加该克隆的克隆，并在附加之前禁用其他输入

添加和禁用的简化工作版本：

const $table = $('#tableData'),
      $tbody = $table.find('tbody'),
      $cloneRow = $tbody.find('tr').first().clone();
  

$table.on('click', 'button.addRow', (e) => {
  e.preventDefault();
  $tbody.find(':input').prop('disabled', true);
  $tbody.append($cloneRow.clone());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Costs and Hours</li>
        </ol>
    </nav>
    <form action='/costs_hours' id="formData" method="POST">
        <div class="card border-secondary w-100 text-light" style="background-color: #333f48">
            <h5 style="background-color: #bf5700;" class="card-header">Costs &amp; Hours</h5>
            <div class="card-body w-100 text-end">
                <div id="errors" class="text-start"></div>
                <table id="tableData" class="table text-light text-center mt-3">
                    <thead>
                        <tr>
                            <th scope="col">Implementation or Annual</th>
                            <th scope="col">Category</th>
                            <th scope="col">Costs</th>
                            <th scope="col">Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select name="imp_or_ann" class="form-select imp_or_ann"
                                            id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>Implementation</option>
                                            <option>Annual</option>
                                        </select>

                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <div class="input-group mb-3">
                                        <select name="category" class="form-select category" id="inputGroupSelect01">
                                            <option disabled selected>Choose...</option>
                                            <option>EMO</option>
                                            <option>Analysts</option>
                                            <option>Maintenance</option>
                                            <option>ETS</option>
                                            <option>BOT</option>
                                            <option>OtherUT</option>
                                            <option>Materials</option>
                                            <option>Non-UT Contract</option>
                                            <option>Contingency</option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="cost" type="text" class="cost form-control">
                                </div>
                            </td>
                            <td>
                                <div class="input-group mb-3">
                                    <input name="hours" type="text" class="hours form-control">
                                </div>
                            </td>
                            <td>
                                <button type="button" style="background-color: #bf5700;"
                                    class="btn btn-warning text-light addRow"><i
                                        class="fas fa-plus-circle"></i>&nbsp;Add
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row text-center my-3">
                <div class="col-11 text-end">
                    <button disabled id="next" type="button" class='btn btn-success'><a id="link"
                            class="text-white">Next</a>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>