单击按钮时禁用所选选项

Question

如何在选择添加按钮时禁用先前选择的字段，并在按下删除按钮时删除禁用。这个流程应该一直持续到最后。这是链接 注意：禁用功能仅适用于所选选项，不适用于选择。在下一行中，该选项应被禁用，并在删除该选项时应启用

单击添加按钮（禁用所选字段选项）和删除按钮（启用所选选项按钮）时类似循环

请参阅下面的代码，您可以对其进行跟踪。

  

      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>`);

             }

          

Answer 1

在button点击方法中，您应该使用以下代码$(this).parents().find("select").prop("disabled", true);遍历到父元素，然后找到select并为元素添加disable属性。var staticPrefills = [{&nbsp; &nbsp; "questionId": "5e578b7d30bb2fd60c1f9855",&nbsp; &nbsp; "note": "Mobile Number",&nbsp; &nbsp; "prefillValue": null&nbsp; },&nbsp; {&nbsp; &nbsp; "questionId": "5e578b8930bb2fd60c1f985c",&nbsp; &nbsp; "note": "Email",&nbsp; &nbsp; "prefillValue": null&nbsp; },&nbsp; {&nbsp; &nbsp; "questionId": "5e578b9330bb2fd60c1f985f",&nbsp; &nbsp; "note": "Name",&nbsp; &nbsp; "prefillValue": null&nbsp; },&nbsp; {&nbsp; &nbsp; "questionId": "5e578ba930bb2fd60c1f9862",&nbsp; &nbsp; "note": "Agent ID",&nbsp; &nbsp; "prefillValue": null&nbsp; }]var staffPrefillArray = [];function generateJson(){&nbsp; var divchildlength =&nbsp; $("#buildyourform").children().length;&nbsp; staffPrefillArray = [];&nbsp; for(var i = 0;&nbsp; i < divchildlength; i++ ) {&nbsp; &nbsp; var selectValue=&nbsp; &nbsp;$(`#buildyourform div:nth-child(${i + 1}) select`).val();&nbsp; &nbsp; var textValue=&nbsp; &nbsp;$(`#buildyourform div:nth-child(${i + 1}) input`).val();&nbsp; &nbsp; var selectAttrValue = $(`#buildyourform div:nth-child(${i + 1}) select option:selected`).attr('questionId');&nbsp;&nbsp;&nbsp; &nbsp; var generateJsonvalue = {&nbsp; &nbsp; &nbsp; "questionId": selectAttrValue,&nbsp; &nbsp; &nbsp; "note": selectValue,&nbsp; &nbsp; &nbsp; "prefillValue": textValue&nbsp; &nbsp; };&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; staffPrefillArray.push(generateJsonvalue);&nbsp; }&nbsp; console.log(staffPrefillArray);}&nbsp;&nbsp;for(var i=0; i<staticPrefills.length; i++){&nbsp; $('#static-select-prefills').append(`<option questionId="${staticPrefills[i].questionId}" value="${staticPrefills[i].note}">&nbsp;&nbsp; &nbsp; &nbsp; ${staticPrefills[i].note}&nbsp;&nbsp;</option>`);}var clicks = 1;var s = 1;$(".btn-addfield").click(function () {&nbsp; &nbsp; if (staticPrefills.length > clicks) {&nbsp; &nbsp; &nbsp; $(this).parents().find("select").prop("disabled", true);&nbsp; &nbsp; &nbsp; var lastField = $("#buildyourform div:last");&nbsp; &nbsp; &nbsp; var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;&nbsp; &nbsp; &nbsp; var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");&nbsp; &nbsp; &nbsp; fieldWrapper.data("idx", intId);&nbsp; &nbsp; &nbsp; var sName = `<select class="fieldtype select-text"&nbsp; name="notes" value="">${staticPrefills.map(txtvalue => `<option questionId="${txtvalue.questionId}" value="${txtvalue.note}">${txtvalue.note}</option>`)}</select>`;&nbsp; &nbsp; &nbsp; var fName = $(`<input type="text" class="fieldname form__field" name="value" value="" required />`);&nbsp; &nbsp; &nbsp; var removeButton = $(`<button class='remove-field'>-</button>.`);&nbsp; &nbsp; &nbsp; removeButton.click(function () {&nbsp; &nbsp; &nbsp; &nbsp; $(this).parent().remove();&nbsp; &nbsp; &nbsp; &nbsp; clicks -= 1;&nbsp; &nbsp; &nbsp; &nbsp; s -= 1;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; fieldWrapper.append(sName);&nbsp; &nbsp; fieldWrapper.append(fName);&nbsp; &nbsp; fieldWrapper.append(removeButton);&nbsp; &nbsp; $("#buildyourform").append(fieldWrapper);&nbsp; &nbsp; clicks += 1;&nbsp; &nbsp; s += 1;&nbsp; } else {&nbsp; &nbsp; alert(&nbsp; &nbsp; &nbsp; `You have only configured ${staticPrefills.length} prefill in the WXM product, More than that not allowed`&nbsp; &nbsp; );&nbsp; }});legend {&nbsp; padding: 0px 10px;&nbsp; background: black;&nbsp; color: #FFF;}.fieldwrapper {&nbsp; display: flex;}input.add {&nbsp; float: right;}input.fieldname {&nbsp; float: left;&nbsp; clear: left;&nbsp; display: block;&nbsp; margin: 5px;}select.fieldtype {&nbsp; float: left;&nbsp; display: block;&nbsp; margin: 5px;}input.remove {&nbsp; float: left;&nbsp; display: block;&nbsp; margin: 5px;}#yourform label {&nbsp; float: left;&nbsp; clear: left;&nbsp; display: block;&nbsp; margin: 5px;}#yourform input,#yourform textarea {&nbsp; float: left;&nbsp; display: block;&nbsp; margin: 5px;}&nbsp; input.fieldname.form__field {&nbsp; margin: 20px 20px 20px 0;}select.fieldtype.select-text {&nbsp; margin: 20px 20px 20px 0;}.btn-addfield{&nbsp; margin: 5px 20px 20px 0;}.remove-field {&nbsp; position: relative;&nbsp; top: 20px;&nbsp; cursor: pointer;&nbsp; color: #EF5451;&nbsp; height:20px;&nbsp; width:20px}.btn-addfield{&nbsp; position: relative;&nbsp; top: 11px;&nbsp; cursor: pointer;&nbsp; color: #EF5451;&nbsp;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="display-hor">&nbsp; <div class="form__group">&nbsp; &nbsp; <div id="buildyourform">&nbsp; &nbsp; &nbsp; <div class="fieldwrapper" data-questionid="5e578b7d30bb2fd60c1f9855" id="field1">&nbsp; &nbsp; &nbsp; &nbsp; <select name="notes" value="" id="static-select-prefills" class="fieldtype select-text">&nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="value" value="" class="fieldname form__field" required="">&nbsp; &nbsp; &nbsp; &nbsp; <button class="btn-addfield">add</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div><button type="submit" onclick="generateJson()">submit</button>

Answer 2

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

Answer 3

我添加以下语句以在选择添加按钮时禁用先前选择的字段。$(this).prevAll('select')[0].disabled=true;您可以参考链接。对于第二个问题，单击“-”按钮时是否要删除整行？