Enable a radio button by selecting another radio button?
I have these three sets of radio buttons:
- <div class="radio">
<input class="radio gateway" type="radio" id="gateway1" name="radio" value="Gateway: YES" /><label for="gateway1">Yes</label>
<input class="radio gateway" type="radio" id="gateway2" name="radio" value="Gateway: NO" /><label for="gateway2">No</label>
</div>
- <div class="radio Gatewayadd">
<input class="radio gatewayadd" type="radio" id="gatewayadd1" name="radio" value="Gateway Address: ENTERED" disabled/><label for="gatewayadd1">Yes</label>
<input class="radio gatewayadd" type="radio" id="gatewayadd2" name="radio" value="Gateway Address: NOT ENTERED" disabled/><label for="gatewayadd2">No</label>
</div>
- <div class="radio Subnet">
<input class="radio subnet" type="radio" id="subnet1" name="radio" value="Subnet Mask: ENTERED" disabled/><label for="subnet1">Yes</label>
<input class="radio subnet" type="radio" id="subnet2" name="radio" value="Subnet Mask: NOT ENTERED" disabled/><label for="subnet2">No</label>
</div>
What I'm trying to do is that when the user clicks #gateway1, it enables the gateway address and subnet mask options. #gateway2 doesn't need to do anything. I know I can just hide/show them if I really need to, but I figured the enable/disable would work.
I have tried the following with no success:
- $("#gateway1").click(function(){
$('#gatewayadd1').prop("disabled", false);
$('#gatewayadd2').prop("disabled", false);
$('#subnet1').prop("disabled", false);
$('#subnet2').prop("disabled", false);
});
and:
- $("#gateway1").click(function(){
$('#gatewayadd1').attr("disabled", false);
$('#gatewayadd2').attr("disabled", false);
$('#subnet1').attr("disabled", false);
$('#subnet2').attr("disabled", false);
});
and:
- $("#gateway1").click(function(){
document.getElementById('gatewayadd1').disabled = false;
document.getElementById('gatewayadd2').disabled = false;
document.getElementById('subnet1').disabled = false;
document.getElementById('subnet2').disabled = false;
});
and:
- $(".gateway").click(function(){
gateway= $(this).val();
var gatewaySentence = sprintf(sentences[6],gateway);
$('#gatewayContents').html( gatewaySentence );
$('#gatewayContents').show();
if ( $(this).attr('id') == 'gateway1' ) {
document.getElementById('gatewayadd1').disabled = false;
document.getElementById('gatewayadd2').disabled = false;
document.getElementById('subnet1').disabled = false;
document.getElementById('subnet1').disabled = false;
}
});
and
- $(".gateway").click(function(){
gateway= $(this).val();
var gatewaySentence = sprintf(sentences[6],gateway);
$('#gatewayContents').html( gatewaySentence );
$('#gatewayContents').show();
if ( $(this).attr('id') == 'gateway1' ) {
$('.gatewayadd').disabled = false;
$('.subnet').disabled = false;
}
});
Any other ideas?