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

时间:2016-05-23 19:45:37

标签: javascript jquery asp.net-mvc

更新中的

(所以每个文本框都有值)我希望默认保存按钮是禁用&当其中一个文本框值发生更改时启用它。使用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">

2 个答案:

答案 0 :(得分:1)

确保添加对jQuery&gt; = 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>

答案 1 :(得分:0)

您可以收听var ViewModel = function(availableCompanies, selectedCompanyApallou) { var self = this; self.availableCompaniesApallou = ko.observableArray(availableCompanies); self.selectedCompanyApallou = ko.observable(self.availableCompaniesApallou.find("offset", selectedCompanyApallou)); self.fieldStreetApallou = ko.editable("Initial value"); postStreetFieldToServerForApallou = function() { $.ajax({ type: "PUT", url: "http://www.san-soft.com/goandwin/addresses/" + 15, contentType: "application/x-www-form-urlencoded; charset=utf-8", data: "Address_id=15&Street=" + self.fieldStreetApallou() //<---- HERE! }).done(function(data) { alert("Record Updated Successfully " + data.status); }).fail(function(err) { alert("Error Occured, Please Reload the Page and Try Again " + err.status); }); }; }; 事件的文本框,并在其中任何一个有值时删除禁用属性。 请查看以下示例代码:

keyup

您必须将$('input[type=text].form-control').on("change", function(){ if($(this).val() != ''){ $('#saveRecord').attr('disabled', false); }else{ $('#saveRecord').attr('disabled', true); } }); 添加到保存按钮,如下所示:

disabled="disabled"