Jquery 在 Firefox 中工作，但在 Chrome 中不工作答案

【问题标题】：Jquery work in Firefox but not in ChromeJquery 在 Firefox 中工作，但在 Chrome 中不工作
【发布时间】：2013-04-26 15:38:43
【问题描述】：

我想创建一个复选框，当复选框被选中时，按钮 btnAccept 将更改其 css 类并变为 d

我的代码在 Firefox 中运行良好，但在 Google Chrome 中无法运行。我尝试谷歌一整天仍然找不到解决方案，有人知道我的错误是什么吗？我的代码如下：这是 Jquery 代码：

function checkboxclick() {
    $("input[id*='TermAcceptCheckBox']").each(function () {
        if (this.checked) {
            $("#<%=btnAccept.ClientID%>").addClass("blue-button19");
            $("#<%=btnAccept.ClientID%>").attr("disabled", false);
        }
        else {
            $("#<%=btnAccept.ClientID%>").removeClass("blue-button19");
            $("#<%=btnAccept.ClientID%>").attr("disabled", true);
        }
    });
}

这是html代码： <asp:CheckBox ID="TermAcceptCheckBox" runat="server" visible="True" OnChange="javascript:checkboxclick();"/>

【问题讨论】：

尝试准确地调试哪个部分不适合你。这对你来说变得容易
您是否总是按照您在此处发布的相同方式格式化您的代码.. 它根本不可读。请格式化您的 jquery 代码。
@rahularyansharma 现在更好，经过我的编辑？它在降价中丢失了
尝试使用prop 而不是attr。 attr 仅设置自 jQuery ~1.7 以来的默认值
你为什么用这个：$("input[id*='TermAcceptCheckBox']")而不是$("#TermAcceptCheckBox")？使用 ID 需要使用 unique 标识符，因此在这里使用 JQuery Attribute Contains 选择器是没有用的。

标签： jquery google-chrome firefox checkbox

【解决方案1】：

试试这个：-

if (this.checked) {
            $("#<%=btnAccept.ClientID%>").addClass("blue-button19");
            $("#<%=btnAccept.ClientID%>").removeAttr("disabled");
        }
        else {
            $("#<%=btnAccept.ClientID%>").removeClass("blue-button19");
            $("#<%=btnAccept.ClientID%>").attr("disabled", "disabled");
        }

【讨论】：

【解决方案2】：

尝试以下代码来禁用和启用按钮：

$("button[name='set-up-account']").removeAttr("disabled");

和

("button[name='set-up-account']").attr("disabled", "disabled");

根据你的代码应该是：

function checkboxclick() {
$("input[id*='TermAcceptCheckBox']").each(function () {
    if (this.checked) {
        $("#<%=btnAccept.ClientID%>").addClass("blue-button19");
        $("#<%=btnAccept.ClientID%>").removeAttr("disabled");
    }
    else {
        $("#<%=btnAccept.ClientID%>").removeClass("blue-button19");
        $("#<%=btnAccept.ClientID%>").attr("disabled", "disabled");
    }
});

}

试试这个希望它能解决你的问题

【讨论】：

.button(..) 在做什么？
@mplungjan 误加了
stackoverflow.com/questions/13266246/… 请查看已接受的答案..

【解决方案3】：

我会用 jQuery 来做：

$("input[id*='TermAcceptCheckBox']").each(function () {
    $btnToDisable = $("#<%=btnAccept.ClientID%>");

    if ($(this).is(':checked'))
        $btnToDisable.removeAttr("disabled");
    else
        $btnToDisable.attr("disabled", "disabled");

    $btnToDisable.toggleClass("blue-button19");

});

我做了一个更简单的例子：

HTML

<input type="checkbox" id="myCheckbox" />

<button id="btn" disabled="disabled">My Button</button>

JQuery

$('#myCheckbox').on('click', function() {
    $btnToDisable = $("#btn");

    if ($(this).is(':checked'))
        $btnToDisable.removeAttr("disabled");
    else
        $btnToDisable.attr("disabled", "disabled");

    $btnToDisable.toggleClass("blue-button19");

});

看working here。

所以问题可能来自：

<asp:CheckBox ID="TermAcceptCheckBox" runat="server" visible="True" OnChange="javascript:checkboxclick();"/>

将OnChange 更改为OnClick：

<asp:CheckBox ID="TermAcceptCheckBox" runat="server" visible="True" OnClick="javascript:checkboxclick();"/>

【讨论】：

【解决方案4】：

重要提示：使用 CLICK 而不是 CHANGE，因为更改需要模糊。

我假设您只有一个复选框，因此不需要每个复选框。
我也使用 prop 而不是 attr 并链接调用，所以更简单的 jQuery

DEMO

<asp:CheckBox id="TermAcceptCheckBox" runat="server" visible="True" />

jQuery:

$(function() {
  $("#<%=TermAcceptCheckBox.ClientID%>").on("click", function() {
    var button = $("#<%=btnAccept.ClientID%>");
    var chk = $(this).is(":checked");
    button.prop("disabled", !chk).toggleClass("blue-button19",chk);
  });
})

请注意，最好将测试放在一个函数中并调用它 onload 以防用户重新加载页面

DEMO

function acceptCheck(checkbox,button) {
    var chk = checkbox.is(":checked");
    button.prop("disabled", !chk).toggleClass("blue-button19",chk);    
}
$(function() {
  $("#TermAcceptCheckBox").on("click", function() {
    acceptCheck($(this), $("#btnAccept"));
  });
  acceptCheck($("#TermAcceptCheckBox"), $("#btnAccept"));
})

【讨论】：