你可以看看我的解決方案。
如果元素不止一個，您必須創建一個禁用功能。并在添加和刪除時調用它。
function desableOthers() {
let elms = $(".fieldwrapper");
if (elms.length > 1) {
elms = elms.slice(0, -1);
elms.each(function() {
$(this)
.find(".fieldname.form__field")
.attr("disabled", "disabled");
$(this)
.find(".fieldtype.select-text")
.attr("disabled", "disabled");
});
return;
}
if (elms.length === 1) {
$(".fieldwrapper .fieldname.form__field").removeAttr("disabled");
$(".fieldwrapper .fieldtype.select-text").removeAttr("disabled");
}
}
解決方案：
var staticPrefills = [
{
questionId: "5e578b7d30bb2fd60c1f9855",
note: "Mobile Number",
prefillValue: null
},
{
questionId: "5e578b8930bb2fd60c1f985c",
note: "Email",
prefillValue: null
},
{
questionId: "5e578b9330bb2fd60c1f985f",
note: "Name",
prefillValue: null
},
{
questionId: "5e578ba930bb2fd60c1f9862",
note: "Agent ID",
prefillValue: null
}
];
var staffPrefillArray = [];
function generateJson() {
var divchildlength = $("#buildyourform").children().length;
staffPrefillArray = [];
for (var i = 0; i < divchildlength; i++) {
var selectValue = $(`#buildyourform div:nth-child(${i + 1}) select`).val();
var textValue = $(`#buildyourform div:nth-child(${i + 1}) input`).val();
var selectAttrValue = $(
`#buildyourform div:nth-child(${i + 1}) select option:selected`
).attr("questionId");
// console.log(selectValue);
// console.log(textValue);
// console.log(selectAttrValue);
var generateJsonvalue = {
questionId: selectAttrValue,
note: selectValue,
prefillValue: textValue
};
staffPrefillArray.push(generateJsonvalue);
}
console.log(staffPrefillArray);
}
for (var i = 0; i < staticPrefills.length; i++) {
$("#static-select-prefills").append(`<option questionId="${
staticPrefills[i].questionId
}" value="${staticPrefills[i].note}">
${staticPrefills[i].note}
</option>`);
}
function desableOthers() {
let elms = $(".fieldwrapper");
if (elms.length > 1) {
elms = elms.slice(0, -1);
elms.each(function() {
$(this)
.find(".fieldname.form__field")
.attr("disabled", "disabled");
$(this)
.find(".fieldtype.select-text")
.attr("disabled", "disabled");
});
return;
}
if (elms.length === 1) {
$(".fieldwrapper .fieldname.form__field").removeAttr("disabled");
$(".fieldwrapper .fieldtype.select-text").removeAttr("disabled");
}
}
var clicks = 1;
var s = 1;
$("#btn-addfield").click(function() {
if (staticPrefills.length > clicks) {
var lastField = $("#buildyourform div:last");
var intId =
(lastField && lastField.length && lastField.data("idx") + 1) || 1;
var fieldWrapper = $('<div class="fieldwrapper" id="field' + intId + '"/>');
fieldWrapper.data("idx", intId);
var sName = `<select class="fieldtype select-text" name="notes" value="">
${staticPrefills.map(
txtvalue =>
`<option questionId="${txtvalue.questionId}" value="${txtvalue.note}">${
txtvalue.note
}</option>`
)}
</select>`;
var fName = $(
`<input type="text" class="fieldname form__field" name="value" value="" required />`
);
var removeButton = $(`<button class='remove-field'>-</button>.`);
removeButton.click(function() {
$(this)
.parent()
.remove();
clicks -= 1;
s -= 1;
desableOthers();
});
fieldWrapper.append(sName);
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
clicks += 1;
s += 1;
desableOthers();
} else {
alert(
`You have only configured ${
staticPrefills.length
} prefill in the WXM product, More than that not allowed`
);
}
});
legend {
padding: 0px 10px;
background: black;
color: #fff;
}
.fieldwrapper {
display: flex;
}
input.add {
float: right;
}
input.fieldname {
float: left;
clear: left;
display: block;
margin: 5px;
}
select.fieldtype {
float: left;
display: block;
margin: 5px;
}
input.remove {
float: left;
display: block;
margin: 5px;
}
#yourform label {
float: left;
clear: left;
display: block;
margin: 5px;
}
#yourform input,
#yourform textarea {
float: left;
display: block;
margin: 5px;
}
input.fieldname.form__field {
margin: 20px 20px 20px 0;
}
select.fieldtype.select-text {
margin: 20px 20px 20px 0;
}
#btn-addfield {
margin: 5px 20px 20px 0;
}
.remove-field {
position: relative;
top: 20px;
cursor: pointer;
color: #ef5451;
height: 20px;
width: 20px;
}
#btn-addfield {
position: relative;
top: 11px;
cursor: pointer;
color: #ef5451;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="display-hor">
<div class="form__group">
<div id="buildyourform">
<div
class="fieldwrapper"
data-questionid="5e578b7d30bb2fd60c1f9855"
id="field1"
>
<select
name="notes"
value=""
id="static-select-prefills"
class="fieldtype select-text"
>
</select>
<input
type="text"
name="value"
value=""
class="fieldname form__field"
required=""
/>
<button id="btn-addfield">add</button>
</div>
</div>
</div>
</div>
<button type="submit" onclick="generateJson()">submit</button>
</body>
