Problem selecting radiobuttons with JQuery

Question

I'm having a problem with the following code. Below is my javascript

<script type="text/javascript"><!--
function toggleTB(val, targetTB) {
    var b = 'disabled';
    if (val == '1') b = '';
    $('#' + targetTB).attr('disabled', b);
}

my html -

    <input id="obp17" name="obp17" onclick="toggleTB('0', 'obp4a');" type="checkbox"/>Corner 
<input id="obp4a" name="obp4a" type="radio" value="17" />Facing Down
<input id="obp4a" name="obp4a" type="radio" value="18" />Facing Up

What I want to happen is that when the user clicks on the check box, both radio buttons are disabled. What is happening is that only the first radio button is disabled. I'm new to jquery selectors, can someone tell me the correct syntax.

Thanks in advance

Answer 1

You want to give different ids to each input you want to disable and then set those ids' attributes accordingly.

Answer 2

You should use unique IDs for the radios, or non at all, or more simply, give them a class, e.g.:

<input id="obp4a" name="obp4a" class="radio" type="radio" value="17" />Facing Down
<input id="obp4b" name="obp4a" class="radio" type="radio" value="18" />Facing Up

In your JS:

$('.radio').attr('disabled', true);

Answer 3

You want to give your elements unique id's. Then to simplify the jQuery selection also give them a class like class="corner_radio".

Then your jquery code turns into:

function toggleTB(val, targetTB) {
   var b = 'disabled';
   if (val == '1') b = '';
   $('.corner_radio').attr('disabled', b);
}

Answer 4

You might like to unobtrusively add a click handler using jQuery instead and you can use jQuery's attr("checked") to find whether the checkbox is checked or not. Something more like this:

var toggleTB = function(el, radioName) {
    $("input:radio[name=" + radioName + "]").attr("disabled", $(el).attr("checked"));
}
$(function() {
    $("#obp17").click(function(e) { toggleTB(e.target, "obp4a"); });
});

I've also cleaned up the HTML a bit, added some labels (so that you can click on the word associated with the form element) and removed the invalid bits:

<label><input id="obp17" name="obp17" type="checkbox" />Corner</label>
<label><input name="obp4a" type="radio" value="17" />Facing Down</label>
<label><input name="obp4a" type="radio" value="18" />Facing Up</label>