如何解决如何禁用先前克隆的元素
在我的输入表单中，用户需要能够输入多行数据。我通过进行 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",$(".cost:not(:last)").attr("disabled",$(".hours:not(:last)").attr("disabled",)
});
这是 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 & 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> 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>
解决方法
问题确实是第一行。您在其中的输入被禁用后克隆它
在页面加载时和在该行中禁用任何内容之前创建它的 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 & 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> 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。