javascript - Disable the selected option while clicking the button

Question

[enter link description here][2]

how to disable the previously selected field while selecting add button and remove the disable while pressing the remove button. This flow should be continued until the end. here is the link Note: disable functionality is only for the selected options not for select. In the next row that option should be disabled and while removing that option should be enabled

its like loop while clicking on the add button(disable the selected field option ) and remove button (enable the selected option button)

Please see below code you can able to track it.

  
      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>

标签： javascriptjquery

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>