【发布时间】：2020-03-21 05:10:10
【问题描述】：
[在此处输入链接描述][2]
如何在选择添加按钮时禁用先前选择的字段，并在按下删除按钮时删除禁用。这个流程应该一直持续到最后。 链接在这里 注意： 禁用功能仅适用于所选选项，不适用于选择。在下一行应该禁用该选项，并在删除该选项时启用
点击添加按钮（禁用所选字段选项）和删除按钮（启用所选选项按钮）时类似循环
请查看下面的代码，您可以对其进行跟踪。
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>`);
}
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;
});
fieldWrapper.append(sName);
fieldWrapper.append(fName);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
clicks += 1;
s += 1;
} 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>
<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>【问题讨论】：
-
您是否过早点击 POST？
-
可以看链接了解问题link
-
要查看的代码太多。你为什么不创建一个简化版本并发布它呢。
-
对不起，我现在只盯着学习javascript。请帮我做。只是您可以在单击添加时专注于禁用所选选项，并在单击删除时删除禁用
-
帮忙太费劲了。如果你减少你的代码会发生两件事，你更有可能自己找到答案，你会帮助我们帮助你。人们会忽略这个问题，因为它很难提供帮助。
标签： javascript jquery