当屏幕中的某些内容发生更改时启用按钮答案

【问题标题】：Enable button when something was changed in the screen当屏幕中的某些内容发生更改时启用按钮
【发布时间】：2014-06-21 12:22:52
【问题描述】：

我已经创建了带有表格的 MVC5 应用程序，并使用以下代码创建了页面，其中包括文本框、复选框和下拉列表，代码工作正常，但我需要更改的是 保存按钮将被禁用，直到用户在屏幕上更改某些内容，例如在文本框中输入值或更改值并在下拉列表中或选中/取消选中复选框，我应该怎么做？

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>ad</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Server, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Server)
                @Html.ValidationMessageFor(model => model.Server)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.checkBox, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.checkBox)
                @Html.ValidationMessageFor(model => model.checkBox)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.User, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.User)
                @Html.ValidationMessageFor(model => model.User)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.password, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.password)
                @Html.ValidationMessageFor(model => model.password)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SelectedSystemType, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.SelectedSystemType, Model.SystemType)
                @Html.ValidationMessageFor(model => model.SelectedSystemType)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

【问题讨论】：

标签： javascript jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

为此，您需要一个客户端代码来检测值的变化。

这是 jQuery 代码。

$('input').change(function () {
   // enable button
}

这就足够了，它会检查每个输入字段的值，并且只有在字段发生变化时才会触发。添加更多您想要的此类事件。

复选框是一种输入元素，所以它会触发同样的事情。 Dropbox（在 HTML 中选择）可以使用这个

$('select').change(function () {
   // enable button
}

这将检查选择语句的变化。

【讨论】：

谢谢1+，但是我应该如何处理复选框和下拉列表？
@M.Herbert，我也添加了 :)

【解决方案2】：

这里有一个关于如何实现这一点的提示： http://plnkr.co/egWA78wDnt0VDS4PrxkK

我们监听表单更改事件

$("form").change(function() {

});

这适用于复选框、选择和单选按钮，但对于文本输入，我们需要监听键盘事件，因为在控件失去焦点之前不会触发更改：我们监听 keyup

javascript：

$(function(){ // document ready function
  $("form").change(function() { // form change (checkboxes, radiobuttons etc)
    $("#submitbtn").show();
  });
  $("input").keyup(function() { // something typed in a textbox
    $("#submitbtn").show();
  });
});

【讨论】：