Question

我已经用表创建了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>
}

Answer 1

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

这是jQuery代码。

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

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

Checkbox是一种输入元素，所以它会触发同样的事情。 Dropbox（在HTML中选择）适用于此

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

这将检查select语句更改。

Answer 2

以下是关于如何实现这一目标的内容： http://plnkr.co/egWA78wDnt0VDS4PrxkK

我们听取形式变化事件

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

});

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

的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();
  });
});

在屏幕中更改内容时启用按钮

2 个答案: