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[i].note} 
             
         `);
             }
          
      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 = $("");
          fieldWrapper.data("idx", intId);
          var sName = ``;
          var fName = $(``);
          var removeButton = $(`.`);
          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; 
}

user_7079025 · Answer

Within the button click method you should use the below code

$(this).parents().find("select").prop("disabled", true);

Traverse to parent element and then find select and add disable property to the element.

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[i].note} 
 `);
}

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 = $("");
      fieldWrapper.data("idx", intId);
      var sName = ``;
      var fName = $(``);
      var removeButton = $(`.`);
      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; 
}

user_2018278 · Answer

I add the following statement to disable the previously selected field while selecting the add button.

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

You may refer to the link.

For the second issue, do you want to delete the whole row when the "-" button is clicked?

user_1594359 · Answer

You can check out my solution.

You have to create a function to disable, if elems are more than one. and call it on add and remove.

    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");
  }
}

Solution:

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(``);
}
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 = $('');
    fieldWrapper.data("idx", intId);
    var sName = ``;
    var fName = $(
      ``
    );
    var removeButton = $(`.`);
    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;
}

Disable the selected option while clicking the button

3 Answers