Question

该代码设置为在未选中编辑按钮时禁用输入。但是，我需要同时使用var rmsie = /(msie) ([\w.]+)/, msie = (_noDOM) ? '' : rmsie.exec(navigator.userAgent.toLowerCase())||[],：

取消所有未保存的输入更改。
取消选中btn--cancel使其处于btn--edit状态（同时还添加取消按钮的active状态）。

hidden

$(document).ready(function() {
  $(".btn--cancel").click(function() {
    $(this)
      .closest('[name="toggle"]')
      .prop("checked", false);
  });
  $(".edit :input").attr("disabled", true);
  $('[name="toggle"]').on("change", function() {
    var cancel = $(this)
      .closest(".item")
      .find(".btn--cancel")
      .toggleClass("hidden");
    var edit = $(this)
      .closest(".item")
      .find(".btn--edit");
    var item = $(this).closest(".item");
    var icon = $(this).next("svg");
    var idInput = $(this).data("input");
    var inputEle = $("." + idInput);
    var toggleInput = $(this);

    inputEle.each(function() {
      if (toggleInput.is(":checked")) {
        cancel.removeClass("hidden");
        edit.addClass("active");
        icon.addClass("fa-save").removeClass("fa-pencil");
        $(this).attr("disabled", false);
      } else {
        cancel.addClass("hidden");
        edit.removeClass("active");
        icon.addClass("fa-pencil").removeClass("fa-save");
        $(this).attr("disabled", true);
      }
    });
  });
});

body {
  margin: 3rem;
}

.item {
  display: flex;
  color: #bbb;
  align-items: center;
}

.wrap {
  border: 2px solid #eee;
  display: flex;
  flex-direction: column
}

.btn {
  margin: 12px;
  color: white;
  padding: 21px;
}

.btn--edit {
  background: orange;
}

.btn--edit.active {
  background: #58d25e;
}

.btn--edit input[type="checkbox"] {
  display: none;
}

.btn--cancel {
  background: red;
}

.hidden {
  display: none;
}

.edit {
  display: flex;
}

.edit input {
  border: 3px solid #eee;
  padding: 0.6rem;
  margin: 1rem;
  color: red;
}

input:focus,
textarea {
  outline: none !important;
}

Answer 1

仔细阅读下面的JS代码，您也可以参考JS小提琴https://jsfiddle.net/0fnq19ut/7/：

$(document).ready(function() {
  $(".btn--cancel").click(function() {
    var parentItemDiv = $(this).closest('.item');
    var editBtnObj = parentItemDiv.find('[name="toggle"]');
    var idInput = $(editBtnObj).data("input");
    // clearing unsaved inputs
        parentItemDiv.find('.'+ idInput).each(function(){
        var oldInputValue = '';
      if( $(this).data('old_value') != null && $(this).data('old_value') != '' ) {
            oldInputValue = $(this).data('old_value');
            }
      $(this).val(oldInputValue);
        });
    // unchecking edit button & triggering it's on change event which takes further actions like: (a) adding hidden state to "cancel" button etc.
    editBtnObj.prop("checked", false).trigger('change');
  });
  $(".edit :input").attr("disabled", true);
  $('[name="toggle"]').on("change", function() {
    var cancel = $(this)
      .closest(".item")
      .find(".btn--cancel")
      .toggleClass("hidden");
    var edit = $(this)
      .closest(".item")
      .find(".btn--edit");
    var item = $(this).closest(".item");
    var icon = $(this).next("svg");
    var idInput = $(this).data("input");
    var inputEle = $("." + idInput);
    var toggleInput = $(this);

    inputEle.each(function() {
            var inputEleValue = '';
      if( $(this).val() != null && $(this).val() != '' ) {
        inputEleValue = $(this).val();
            }
      $(this).data('old_value', inputEleValue);
      if (toggleInput.is(":checked")) {
        cancel.removeClass("hidden");
        edit.addClass("active");
        icon.addClass("fa-save").removeClass("fa-pencil");
        $(this).attr("disabled", false);
      } else {
        cancel.addClass("hidden");
        edit.removeClass("active");
        icon.addClass("fa-pencil").removeClass("fa-save");
        $(this).attr("disabled", true);
      }
    });
  });
});

添加了以下更改： 1）单击“取消”按钮时，您取消选中了正确的“编辑复选框”，只是触发了该复选框的“更改时”事件。请确保按照之前编写的代码将“隐藏”类添加到“取消”按钮，并删除“活动”类的“编辑”按钮。

2）取消输入的未保存更改。为此，我在“编辑”复选框的“更改时”事件中添加了几行，如下所示：

（a）创建了一个名为“ old_value”的数据属性，并将其存储在每个输入元素中。

（b）当用户单击“取消”按钮时，只是检索了“ old_value”数据属性并针对每个“ input”元素分配了该值。

jQuery-使用复选框编辑/保存/取消对输入的更改

1 个答案: