Question

Here’s a live demo.

I have the following html:

<div  class="Q">
<div id="Q3"><span>1. </span>Which of the following is a string?</div>
<div class="A"><input type="radio"  id="Q3A1Correct" /></div> 
<div class="A"><input type="radio"  id="Q3A2Correct"/></div>
<div class="A"><input type="radio" id="Q3A3Correct" checked/></div>
<div class="A"><input type="radio"  id="Q3A4Correct" /></div>
</div>
<div  class="Q">
<div id="Q1"><span>2. </span>Which of the following have the same meaning?</div>
<div class="A"><input type="checkbox"  id="Q2A1Correct" /></div> 
<div class="A"><input type="checkbox"  id="Q2A2Correct" /></div>
<div class="A"><input type="checkbox" id="Q2A3Correct" checked/></div>
<div class="A"><input type="checkbox"  id="Q2A4Correct" /></div>
</div>  

And I want to prevent the user from changing the selections, without disabling the inputs.
So I did this:

    $(':checkbox[id$="Correct"]').click(function (event) {        
        event.preventDefault();
    });
    $(':radio[id$="Correct"]').click(function (event) {        
        event.preventDefault();
    });

And it worked for the checkboxes on all browsers, but for the radios it worked on IE9 and Opera, but not on FF 3.6.17 and Chrome.
So I’m curious about why that’s so, but I also need a work around to make it work on all browsers.

Thanks.

Answer 1

not why it works for one but not the other but typically radio buttons have the same name and you make a choice so I started there

so for html

<div  class="Q">
    <div id="Q3"><span>1. </span>Which of the following is a string?</div>
    <div class="A"><input type="radio"  name="foo" /></div>
    <div class="A"><input type="radio"  name="foo"/></div>
    <div class="A"><input type="radio" name="foo" checked/></div>
    <div class="A"><input type="radio"  name="foo"/></div>
</div>

and for jQuery

$('[name="foo"]:radio').click(function(event) {
    event.preventDefault();
});

working demo