单击按钮时禁用所选选项
如何在选择添加按钮时禁用先前选择的字段，并在按下删除按钮时删除禁用。这个流程应该一直持续到最后。这是链接 注意：禁用功能仅适用于所选选项，不适用于选择。在下一行中，该选项应被禁用，并在删除该选项时应启用
单击添加按钮（禁用所选字段选项）和删除按钮（启用所选选项按钮）时类似循环
请参阅下面的代码，您可以对其进行跟踪。
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>`);
}
绝地无双浏览 148回答 3
3回答
-
哔哔one
在button点击方法中，您应该使用以下代码$(this).parents().find("select").prop("disabled", true);遍历到父元素，然后找到select并为元素添加disable属性。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'); 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) { $(this).parents().find("select").prop("disabled", true); 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 class="btn-addfield">add</button> </div> </div> </div></div><button type="submit" onclick="generateJson()">submit</button> -
白板的微信
你可以看看我的解决方案。如果元素不止一个，您必须创建一个禁用功能。并在添加和删除时调用它。 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> -
Qyouu
我添加以下语句以在选择添加按钮时禁用先前选择的字段。$(this).prevAll('select')[0].disabled=true;您可以参考链接。对于第二个问题，单击“-”按钮时是否要删除整行？
随时随地看视频慕课网APP
相关分类
JavaScript