Menu
I am new to jQuery. Any help would be appreciated
I have two radio button and two text box in which i displayed the date using jquery.
When i click on Radio1 then in both the text box i should be able to select date but when i click on Radio2 then i shouldn't be able to select the date in text2 field. text2 field should be disabled and jquery date picker should not work.
I have disabled the text2 field but the date function is still working.
--
<script language='javascript'>
<!-- //
function setReadOnly(obj)
{
if(obj.value == "yes")
{
document.forms[0].text2.style.backgroundColor = "#ffffff";
document.forms[0].text2.readOnly = 0;
document.forms[0].text2.value = "";
} else {
document.forms[0].text2.style.backgroundColor = "#eeeeee";
document.forms[0].text2.readOnly = 1;
document.forms[0].text2.value = "Not applicable!";
document.forms[0].number = disbaled;
}
}
// -->
</script>
<script>
$(document).ready(function() {
$("#text1").datepicker
({
showOn: 'button', buttonImage: 'images/cal.gif', buttonImageOnly: true,
dateFormat: 'dd-mm-yy',
numberOfMonths: 2,
minDate:0
})
$("#text2").datepicker
({
showOn: 'button', buttonImage: 'images/cal.gif', buttonImageOnly: true,
dateFormat: 'dd-mm-yy',
numberOfMonths: 2,
minDate:1
})
})
</script>
</head>
<body>
<form>
<input type=radio name="update" value="yes" checked onclick="setReadOnly(this)">
Radio1 <br />
<input type=radio name="update" value="no" onclick="setReadOnly(this)">
Radio2 <br />
<input name="text1" type="text">
<input name="text2" type="text">
<select name="number">
<option value="11">11</option>
<option value="12">12</option>
</select>
</form>
737
In jQuery fashion, you have to change the code in your setReadOnly function code to:
function setReadOnly(obj){
if(obj.value == "yes"){
$('#text2').css('backgroundColor','#ffffff');
$('#text2').removeAttr('readOnly');
$('#text2').val('');
$('#text2').datepicker('enable');
$('#number').removeAttr('disabled');
}
else {
$('#text2').css('backgroundColor','#eeeeee');
$('#text2').attr('readonly','readonly');
$('#text2').val('Not applicable!');
$('#text2').datepicker('disable');
$('#number').attr('disabled',true);
}
}
EDIT: While the above code works just fine, as pointed out by @Deviant, the related methods could be chained to take full advantage of jQuery's powerful features.
function setReadOnly(obj){
if(obj.value == "yes"){
$('#text2').css('backgroundColor','#ffffff')
.removeAttr('readonly')
.val('')
.datepicker('enable');
$('#number').removeAttr('disabled');
}
else {
$('#text2').css('backgroundColor','#eeeeee')
.attr('readonly','readonly')
.val('Not applicable!')
.datepicker('disable');
$('#number').attr('disabled',true);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
