Question

我想创建一个复选框，当勾选复选框时，按钮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();"/>

Answer 1

试试这个： -

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

Answer 2

我会用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();"/>

Answer 3

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

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

}

试着希望它能解决你的问题

Answer 4

重要：使用点击而不是更改，因为更改需要模糊。

我假设您只有一个复选框，因此不需要每个复选框我也使用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"));
})

Jquery在Firefox中工作，但在Chrome中没有

4 个答案: