单击按钮时禁用所选选项

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 = [{

    "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>

Answer 2

你可以看看我的解决方案。

如果元素不止一个，您必须创建一个禁用功能。并在添加和删除时调用它。

    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>

Answer 3

我添加以下语句以在选择添加按钮时禁用先前选择的字段。

$(this).prevAll('select')[0].disabled=true;

您可以参考链接。

对于第二个问题，单击“-”按钮时是否要删除整行？