Question

I have included my two code sources below.

The problem that I am having is that if you click one of the radio buttons (radio-group is the ID of the group of buttons), the previously ‘checked’ option does not deselect and the new ‘checked’ option does not get selected. Instead what happens is that the selector click event happens and the ‘checked’ option remains the same.

How do I fix this? I have tried clearing the ‘checked’ option whenever a new option is ‘checked’ and then checking that option via Javascript, but I have am not having any success.

Thoughts?

Thanks!

Javascript code:

$(function() {

$("#paid-content-box").hide();
$("#general-settings").show();
$("#individual-box-prices").hide();
$("#paypal-preference").hide();

$("#general-settings-link a").click(function() {
    $("#paid-content-box").hide();
    $("#general-settings").show();
    return false;
});

$("#paid-content-settings-link a").click(function() {
    $("#paid-content-box").show();
    $("#general-settings").hide();
    return false;
});

$("input#somepaid").click(function() {  
    document.forms['paidContentForm'].elements['perbox'].disabled = true;
    $("#individual-box-prices").show();
    $("#paypal-preference").show();
    return false;
});

$("input#allfree").click(function() {
    document.forms['paidContentForm'].elements['perbox'].disabled = true;
    $("#individual-box-prices").hide();
    $("#paypal-preference").hide();
    return false;
}); 

$("input#subscription").click(function() {  
    document.forms['paidContentForm'].elements['perbox'].disabled = false;
    $("#individual-box-prices").hide();
    $("#paypal-preference").show();
    return false;
}); 

});

HTML/PHP Code:

<div id="paid-content-box" align="left">
<form name="paidContentForm" action="" method="post">
<h2>Set Your group / Box Prices</h2>
<div id="radio-group" class="radiogroup">
<input id="allfree" type="radio" name="boxprices" value="allfree" checked><label for="allfree">All boxes are free.</label><br />
<input id="subscription" type="radio" name="boxprices" value="subscription"><label for="subscription">Subscription pricing (all paid).</label>
<label for="perbox">Enter price per box: $</label><input id="perbox" type="text" name="subscriptionpriceper" disabled="true"><br />
<input id="somepaid" type="radio" name="boxprices" value="somepaid"><label for="somepaid">Some of the boxes are free and some our paid content.  (Please set the price for each box in the textboxes that will appear below.)</label>
</div>
<div id="individual-box-prices">
<h3>Set Individual Box Prices</h3>
<table id="pricetable">
<tr>
<th>Box Name</th>
<th>Free/Paid</th>
<th>Price</th>
</tr>

<? foreach($boxInfo as $newBox){ ?>
    <tr>
    <td><? echo $newBox['name']?></td>
    <td><span id="box_<? echo $newBox['id']?>_free">Free</span> | <span id="box_<? echo $newBox['id']?>_paid"><a href="javascript:freePaidOption(<? echo $newBox['id']?>, 'paid')">Paid</a></span></td>
    <td><label for="box_<? echo $newBox['id']?>_price">$</label><input id="box_<? echo $newBox['id']?>_price" type="text" name="box_<? echo $newBox['id']?>_price" value="" disabled="true"></td>
    </tr>
    <input type="hidden" name="defaultFreePaid_<? echo $newBox['id']?>" value=""/>
<? } ?>

</table>
</div>
<div id="paypal-preference">
<h3>Payment Preferences</h3>
<label for="paypalemail">Enter your PayPal account email address:</label><input type="text" id="paypalemail" name="paypalemail">
</div>
<br /><br />
<input type="submit" name="SavePaidContent" value="Save" class="inputText">
</form>
</div>

Answer 1

All of your event handlers return false. That prevents the default action, which is to change the selected radio button.