javascript - 在调用 javascript 函数后面的代码中添加 onclick 属性，并使用引用 ClientID 的字符串参数

Question

我环顾四周，但找不到将其组合在一起所需的所有部件。问题是我想从多个地方调用相同的 javascript 函数，因此我需要将元素的 ID 传递到函数中，以便我可以更改它们。这个想法很简单。我只想要四个复选框在单击时调用此函数，以便防止最后一个复选框被取消选中。这是我到目前为止所拥有的。

HTML:

<asp:CheckBox ID="cbBlue" Text="Blue" Checked="true" runat="server" />
<asp:CheckBox ID="cbGreen" Text="Green" Checked="true" runat="server" />
<asp:CheckBox ID="cbRed" Text="Red" Checked="true" runat="server" />
<asp:CheckBox ID="cbYellow" Text="Yellow" Checked="true" runat="server" />
<asp:HiddenField ID="hdnCheckCount" runat="server" Value="4" />

C#:

protected void Page_Load(object sender, EventArgs e)
{
    cbBlue.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
    cbGreen.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
    cbRed.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
    cbYellow.Attributes.Add("onclick", "checkCheck(" + this.ClientID + ")");
}

Javascript:

function checkCheck(elementID) {
    if ($('#<%=hdnCheckCount.ClientID%>').val() == 1) {
        elementID.prop("checked", true);
        return;
    }
    else {
        if (elementID.is(":checked")) {
            elementID.prop("checked", false);
            $('#<%=hdnCheckCount.ClientID%>').val($('#<%=hdnCheckCount.ClientID%>').val() - 1);
        }
        else {
            elementID.prop("checked", true);
            $('#<%=hdnCheckCount.ClientID%>').val($('#<%=hdnCheckCount.ClientID%>').val() + 1);
        }
    }
}

这可能吗？我很接近吗？另外，我有点不确定是否需要在 JavaScript 中实际设置复选框的选中状态，因为我猜这已经在其他地方处理过了。但是我不确定强制它为 true 是否有效，因为在 javascript 函数运行后它可能仍然未被选中。

Answer 1

由于实际上没有数据传递到后端，我建议完全使用 JavaScript 来完成此操作。因为我看到您正在使用 jQuery，所以我建议您这样做。

首先，为所有复选框添加一个类

<asp:CheckBox ID="cbBlue" CssClass="keepOneChecked" Text="Blue" Checked="true" runat="server" />
<asp:CheckBox ID="cbGreen" CssClass="keepOneChecked" Text="Green" Checked="true" runat="server" />
<asp:CheckBox ID="cbRed" CssClass="keepOneChecked" Text="Red" Checked="true" runat="server" />
<asp:CheckBox ID="cbYellow" CssClass="keepOneChecked" Text="Yellow" Checked="true" runat="server" />

然后使用jQuery绑定(bind)onclick事件

$(function(){ 
    //bind event
    $('.keepOneChecked').click(function(e){
        //get all the checkboxes that ARE checked
        //.keepOneChecked is applied to a span wrapping the input and label because of ASP
        var $checked = $('.keepOneChecked input:checked');
        if( $checked.length == 1){
            //if there is only 1, disable it so you can't uncheck it
            $checked.attr('disabled',true);
        }
        else{
            //otherwise a second or more just got checked so enable all of them
            $checked.attr('disabled',false);
        }
    }); 
});

至于你具体遇到的问题，我认为当你绑定(bind)时

cbRed.Attributes.Add("onclick", "checkCheck('#<%=this.ClientID%>')");

“this”被引用到页面而不是元素，而且语法是错误的。您可以尝试:

cbRed.Attributes.Add("onclick", "checkCheck('"+cbRed.ClientID+"')");

看看这是否有效，但我会先尝试仅使用 jQuery 来实现。