使用 JQuery 或 Js (MVC) 在更新表单中禁用保存按钮

Question

在更新中（因此每个文本框都会有值）我希望默认情况下禁用保存按钮并在文本框值之一为 changed.using jQuery 或 Js 时启用它.

@Html.TextBoxFor(model => model.FirstName, new { @class = "form-control" })
@Html.TextBoxFor(model => model.LastName, new { @class = "form-control" })
@Html.TextBoxFor(model => model.Address, new { @class = "form-control" })
@Html.TextBoxFor(model => model.Phone_No, new { @class = "form-control" })

<input type="submit" class="btn-mvc btn-mvc-green btn-mvc-fullwidth" value="Save Record" id="saveRecord">

Answer 1

您可以监听文本框的 keyup 事件，并在其中任何一个具有值时删除禁用属性。检查此示例代码：

$('input[type=text].form-control').on("change", function(){
  if($(this).val() != ''){
    $('#saveRecord').attr('disabled', false);
  }else{
     $('#saveRecord').attr('disabled', true);
  }
});

您必须将 disabled="disabled" 添加到保存按钮，如下所示：

<input type="submit" class="btn-mvc btn-mvc-green btn-mvc-fullwidth" value="Save Record" id="saveRecord" disabled="disabled">

Answer 2

确保添加对 jQuery >= 1.9 的引用，然后使用以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#saveRecord").prop('disabled', true);

        $("#saveRecord").click(function () {

        });

        $(".form-control").on("change keyup paste",function () {
            var text = $(this).val();
            var textLength = text.length;

            if(textLength > 0)
                $("#saveRecord").prop('disabled', false);
            else
                $("#saveRecord").prop('disabled', true);
        });
    });
</script>

使用 JQuery 或 Js (MVC) 在更新表单中禁用保存按钮

Disable Save button in update form using JQuery or Js (MVC)

javascript

asp.net-mvc

jquery