Question

情景：

我有一张可能有或没有价值的表格。最初，提交按钮将被禁用。如果我更改了表单元素中的任何内容，我需要启用提交按钮。但是，如果我将具有值“SAM”的名称文本框更改为“SAM2”，这将启用提交按钮，但如果我再次将名称值更改为其原始值“SAM”，则其被视为未触及且提交按钮应为禁用。

当前实施：

从目前开始，我使用了change事件来启用提交按钮，但是如果我还原了该值，则该按钮仍然处于启用状态。

代码：

HTML：

<form id="specgeneralform">
<div class="row">
    <div class="col-3">
        <div class="form-group">
            <label for="spec-detail-outsource">Outsource</label>
            @Html.DropDownListFor(m => m.OutSource, outsourcelistItems, "Please Select", new { @id = "spec-detail-outsource" })
        </div>
    </div>
    <div class="col-3 lsc-optional-hide" id="vendor-block">
        <div class="form-group">
            <label for="spec-detail-vendors">Vendor</label>
            @Html.DropDownListFor(m => m.VendorID, new SelectList(Model.listVendors, "VendorID", "VendorName"), "Please Select", new { @id = "spec-detail-vendors" })
        </div>
    </div>
    <div class="col-3 lsc-optional-hide" id="plant-block">
        <div class="form-group">
            <label for="spec-detail-plant">Plant</label>
            @Html.DropDownListFor(m => m.PlantID, new SelectList(Model.listPlants, "PlantID", "PlantName"), "Please Select", new { @id = "spec-detail-plant" })
        </div>
    </div>
    <div class="col-3 lsc-optional-hide" id="dsc-block">
        <div class="form-group">
            <label for="spec-detail-dsclocation">DSC Location</label>
            @Html.DropDownListFor(m => m.DscLocationID, new SelectList(Model.listDSCLocations, "PlantID", "PlantName"), "Please Select", new { @id = "spec-detail-dsclocation" })
            @Html.HiddenFor(x => x.DscLocationID)
        </div>
    </div>
    <div class="col-3 lsc-optional-hide" id="cost-block">
        <div class="form-group">
            <label for="spec-detail-cost">Cost</label>
            <div class="input-group input-group-sm">
                <div class="input-group-prepend">
                    <span class="input-group-text">$</span>
                </div>
                @Html.TextBoxFor(x => x.Cost, new { @class = "form-control small" })
                <div class="input-group-append">
                    @Html.DropDownListFor(m => m.CostUOM, costuomlistItems, "Please Select", new { @id = "spec-detail-unit" })

                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="form-group">
            <label for="comment">Comments</label>
            @Html.TextAreaFor(x => x.BuyerComments, new { @class = "form-control" })
            <label id="BuyerComments-error" class="error invalid-feedback" for="BuyerComments">Comments must not be more than 1000 characters</label>
        </div>
    </div>
</div>
<div class="row" style="padding-bottom: 15px;">
    <div class="col-12">
        <button id="spec-detail-general-save" type="button" class="btn lsc-btn-primary float-right" disabled="disabled">SAVE CHANGES</button>
    </div>
</div>
</form>

JS：

$(":input").change(function () {

    if ($("#specgeneralform").valid()) {
        unsaved = true;
        $("#spec-detail-general-save").prop("disabled", false);
    }
    else {
        unsaved = false;
        $("#spec-detail-general-save").prop("disabled", true);
    }
});

请告知任何最好的方法吗？

更新＃1

我已经尝试过@ Takit-Isy解决方案，除了这个之外的每个元素都有用。

<tr>
   <td>Spec Confirmed:</td>
   <td>
      <label class="switch">
        @Html.CheckBoxFor(x => x.SpecConfirmed)
        <span class="slider round"></span>
      </label>
    </td>
  </tr>
  <tr>
     <td>MDM Override:</td>
        <td>
           <label class="switch">
             @Html.CheckBoxFor(x => x.IsOverride)
             <span class="slider round"></span>
           </label>
         </td>
      </tr>

所以我设置了像这样的复选框，这是不起作用，但休息是完美的。

Answer 1

试图加强Keith的答案，我将做以下事情：

const inputs = document.querySelectorAll("input, select");
for (const el of inputs){
  el.oldValue = el.value + el.checked;
}

// Declares function and call it directly
var setEnabled;
(setEnabled = function() {
  var e = true;
  for (const el of inputs) {
    if (el.oldValue !== (el.value + el.checked)) {
      e = false;
      break;
    }
  }
  document.querySelector("button").disabled = e;
})();

document.oninput = setEnabled;
document.onchange = setEnabled;

<form>
  input 1: <input value="one"><br>
  input 2: <input value="two"><br>
  select 1:
  <select>
    <option>Bla1</option>
    <option>Bla2</option>
    <option>Bla3</option>
  </select><br>
  Checkbox 1: <input type="checkbox"><br>
  Checkbox 2: <input type="checkbox" checked><br>
  <button action="submit">Save</button>
</form>

我知道在创建之后声明函数直接调用它的方法很棘手，但是，这就是方法并且它工作正常！...

我希望它有所帮助。

Answer 2

在更改时，遍历macro_rules!并检查所有输入是否为空（或默认值 - 如input）。如果是，则禁用按钮;否则，启用按钮。如果没有看到HTML表单的内容，很难准确地发布如何迭代。

Answer 3

由于您可能有动态初始值，我建议采用一般方法。设置数据属性中所有输入的初始值，以便您可以将任何更改与初始值进行比较：

$(document).ready(function(){
     $(":input").each(function(){
        $(this).data("initial",$(this).val());
     })
})

$(":input").change(function () {

    if ($("#specgeneralform").valid() && $(this).val() != $(this).data("initial")) {

        unsaved = true;
        $("#spec-detail-general-save").prop("disabled", false);
    }
    else {
        unsaved = false;
        $("#spec-detail-general-save").prop("disabled", true);
    }
});

Answer 4

不使用jQuery，这是一个简单的方法..

测试：从one更改输入1，然后再返回..对输入2执行相同的操作..

＆＃13;

const inputs = document.querySelectorAll("input");

function saveCurrent() {
  for (const el of inputs) el.oldValue = el.value;
}

function setEnabled() {
  var e = false;
  for (const el of inputs) {
    if (el.oldValue !== el.value) {
      e = true;
      break;
    }
  }
  document.querySelector("button").disabled = !e;
}

document.addEventListener("input", setEnabled);

saveCurrent();
setEnabled();

＆＃13;

<form>
  input 1: <input value="one"><br>
  input 2: <input value="two"><br>
  <button action="submit">Save</button>
</form>

＆＃13;

Answer 5

如果您正在寻找兼容IE的浏览器，请在下面使用

修改后的Takit Isy版本，该版本是从Keith（谢谢）那里借来的。

   $(document).ready(function () {    
         trackInputs(); 
    });

    var controls = $('form').find(':input');
    var controlValues = [];
    $(controls).each(function (i, element) {
        var ctrl = [element.id, element.value + element.checked]
        controlValues.push(ctrl);
    });
    function trackInputs() {
      var disabled = true;
        $(controlValues).each(function (i, element) {
            if (element[0] != "") {
                var ctr = $("#" + element[0]);
                if ($(ctr).val() + $(ctr).prop( "checked" ) !== element[1]) {
                    disabled = false;
                }
            }
        });
        var submitButton = document.querySelector("[type=submit]");
        if (submitButton != null)
        {
            submitButton.disabled = disabled;
        }
    };
    document.oninput = trackInputs;
    document.onchange = trackInputs;

仅在值更改时启用“提交”按钮

5 个答案: