Question

我有一个我正在研究的MVC 4应用程序。其中一个页面是一个登录页面，其中包含2个用于用户名和密码的文本字段。我在页面底部有一个提交按钮。我已经为按钮设置了样式，我正在尝试做的是使按钮是我在文本字段中没有任何内容时设置的灰色，当两个文本字段都有值时，按钮会改变颜色。如何使用JavaScript完成此操作？这是我尝试过的，但它只是抛出一个错误：

$(document).ready(function () {
    $("#uName, #pWord").value(function () {
        if ($("#uName, #pWord").is(null)) {
            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
});

提前感谢您的帮助！我对JS真的不好。

Answer 1

使用此

$(document).ready(function () {
    $("#uName, #pWord").change(function () {
        if (!$("#uName").val().length && !$("#pWord").val().length) {
            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
});

没有名为value的事件。您希望捕获在编辑输入字段文本时触发的事件change。

Answer 2

首先，您尝试使用的方法是val，而不是value。其次，您需要在keyup之类的事件下运行代码。试试这个：

$(document).ready(function () {
    $("#uName, #pWord").keyup(function () {
        if (!$("#uName").val() || !$("#pWord").val()) {
            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
});

Answer 3

试试这个，

Js脚本

  $(document).ready(function () {
    $("#uName, #pWord").change(function () {
        if ($("#uName").val()!='' && $("#pWord").val()!='') {

            $("#submitBtnNormal").removeClass('on');
        } else {
            $("#submitBtnNormal").addClass('on');
        };
    });
 });

<强> DEMO

根据文本字段更改按钮颜色

3 个答案: