为什么对于使用复选框的HTML表单，此代码在jQuery / JavaScript中不起作用？

Question

Okay, this is kind of blowing my mind because I have used these bits of code separately and very successfully but when I put these together they don't work. I will explain what I am trying to do, although it will probably be pretty self-explanatory when you see the code below.

I am trying to simply make sure that only one of two checkboxes can be checked at a time for an HTML form. (Can't use radio button because the option for neither box to be checked must be available).

Anyway, here is the code (please assume that the ids of the input fields are accurate, they are "sIsGangMember" and "sIsNotGangMember"

$("#sIsGangMember").change(function () {

    if ($("#sIsGangMember").is(':checked')) {
        document.getElementById("sIsNotGangMember").checked = false;
    }
});

$("#sIsNotGangMember").change(function () {

    if ($("#sIsNotGangMember").is(':checked')) {
        document.getElementById("sIsGangMember").checked = false;
    }
});

I am really sorry if this is something stupid, but I know I have used all parts of this code separately before and all works great, but I simply can't see anything wrong with it nor do I see anything wrong with the HTML part:

<tr>
    <td class="lineupColor2">
        Search For Street<br/>Gang Member
    </td>
    <td class="lineupColor2">
        <label for="sIsGangMember">Is Gang Member</label>
        <br/>
        <input type="checkbox" id="sIsGangMember" name="sIsGangMember" 
            style="margin-left: 115px;" value="ticked" @IsGangMemberTicked/>
    </td>
    <td class="lineupColor2"> 
        <label for="sIsNotGangMember">Is Not Gang Member</label>
        <br/>
        <input type="checkbox" id="sIsNotGangMember" name="sIsNotGangMember"
            style="margin-left: 115px;" value="ticked" @IsNotGangMemberTicked/>
    </td>
    <td class="lineupColor2">
         <button type="button" style="cursor: pointer;" 
             onclick="clearIsGangMembers()">Clear Fields
         </button>
    </td>
    <td class="lineupColor2">
    </td>
</tr>

The razor (C#) that you see is simply a value that holds nothing or holds the string "checked='checked'" so that the form remembers the values of whether they are checked or not for further searches or if an error occurs and the form is not submitted, etc.

The part that assigns the C# variables are:

    //////////////////////////////////////////////////////////////////////////////////////////
    if(IsGangMember=="ticked"){IsGangMemberTicked="checked='checked'";}///////////////////////
    if(IsNotGangMember=="ticked"){IsNotGangMemberTicked="checked='checked'";}/////////////////
    //////////////////////////////////////////////////////////////////////////////////////////

Anyway, thanks for any help!

Thanks for all the help everyone, but can anyone tell me "why" this won't work?

UPDATE:

Okay, .click doesn't work either... clearly there is something else going on here...

Answer 1

You will need to use click or mousedown instead of the change event.

jQuery checkbox change and click event

Ex. http://jsfiddle.net/qn8Kh/2/

For some more information on why this is: jQuery difference between change and click event of checkbox

Answer 2

Okay, I really appreciate the help, and somehow (after hours of searching and researching what could be wrong) I knew it would be something silly.

Truth is, there is nothing wrong with using .change in this fashion.

My problem was that I accidentally put the functions:

$("#sIsGangMember").change(function () {

if ($("#sIsGangMember").is(':checked')) {
    document.getElementById("sIsNotGangMember").checked = false;
}
});

$("#sIsNotGangMember").change(function () {

if ($("#sIsNotGangMember").is(':checked')) {
    document.getElementById("sIsGangMember").checked = false;
}
});

All by themselves in the js file (eg, not wrapped in (document).ready or jQuery(function) or anything....

That's lame, yes, I know xD sry about that, and thnx for your help, everyone!