Add an onclick attribute in code behind calling javascript function with string parameter referencing ClientID

Question

I've looked around, and I can't quite find all the pieces I need to put this together. The problem is that I want to call the same javascript function from multiple places, so I need to pass the element's ID into the function so I can change them all. The idea is very simple. I just want four checkboxes to call this function when clicked so that it will prevent the last box from being unchecked. Here's what I have so far.

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);
        }
    }
}

Is this possible? Am I close? Also, I'm a little unsure about whether I need to actually set the checked state of the boxes in the javascript, since I guess that's already handled elsewhere. But then I'm not sure about whether forcing it to true would work, since it might still be unchecked after the javascript function runs.

Joe M · Accepted Answer · 2015-06-30 19:31:38Z

1

Since no data is actually being passed to the backend, I'd recommend doing this entirely in javascript. Since I see you are using jQuery this is what I'd recommend doing.

First off, add a class to all the checkboxes

<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" />

Then using jQuery to bind the onclick event

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

As for the issue you are specifically having, I think when you are binding

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

"this" is being refered to the page instead of the element, plus the syntax is wrong. You could try:

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

And see if that works, but I'd try doing it in only jQuery first.

edited Jun 30, 2015 at 19:31

Joe M

3,5904 gold badges45 silver badges67 bronze badges

answered Jun 12, 2015 at 19:49

Matti Price

3,54118 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Joe M Over a year ago

This didn't work either. But we ended up abandoning this idea because we're writing a custom control that will replace the checkboxes. Thanks.

Matti Price Over a year ago

What exactly didn't work @JoeM ? Making a custom control like that is going to be a lot slower then doing it with javascript and then validating when they submit data. Every post back, especially in Forms is expensive.

Joe M Over a year ago

It didn't prevent the last box from unchecking. I tried a few different ways and none worked. The custom control won't be using checkboxes anymore. It's going to be a modified drop down list.

Matti Price Over a year ago

@JoeM : take a look at this fiddle and compare it to what you have. I know your checkboxes will be asp control, but the principle remains the same https://jsfiddle.net/8w1pc7tk/ Basically the javascript I gave you shouldn't be in it's own function, but should just be included on the page somewhere or in a JS file that's included on the page.

Joe M Over a year ago

Yes, it seems to work in the fiddle page, but it's not working for me with the ASP controls. I copy pasted the JS from here and from that link, and neither works. I can uncheck all four boxes.

|

Collectives™ on Stack Overflow

Add an onclick attribute in code behind calling javascript function with string parameter referencing ClientID

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related