Отключите выбранную опцию, нажимая кнопку - PullRequest
Новая
       1

Отключите выбранную опцию, нажимая кнопку

2 голосов
/ 21 марта 2020

enter image description here

[введите описание ссылки здесь] [2]

как отключить ранее выбранное поле при выборе кнопки добавления и удалить отключение при нажатии кнопка удаления. Этот поток следует продолжать до конца. вот ссылка Примечание: отключение функции доступно только для выбранных опций, а не для выбора. В следующей строке этот параметр должен быть отключен, и при удалении этот параметр должен быть включен

аналогично l oop при нажатии на кнопку добавления (отключить выбранную опцию поля) и кнопку удаления (включить выбранная кнопка выбора)

Пожалуйста, смотрите код ниже, вы можете отследить его. 

  
      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>

Ответы [ 3 ]

1 голос
/ 21 марта 2020

В методе button click следует использовать приведенный ниже код 

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

Перейдите к родительскому элементу, а затем найдите свойство select и добавьте отключение к элементу. 

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>
0 голосов
/ 21 марта 2020

Вы можете проверить мое решение.

Вы должны создать функцию для отключения, если число элементов больше одного. и вызвать его при добавлении и удалении. 

    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>
0 голосов
/ 21 марта 2020

Я добавляю следующее утверждение, чтобы отключить ранее выбранное поле при выборе кнопки добавления. 

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

Вы можете обратиться к ссылке .

. Второй вопрос, хотите ли вы удалить всю строку при нажатии кнопки «-»?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...