tags:

views:

1679

answers:

4

Hi guys, 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.

--

my code goes here

<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>
A: 

Try the following in your setReadOnly() function

function setReadOnly(obj) {
    $("#text1").datepicker('disable');
    $("#text2").datepicker('disable');
}
Steerpike
+4  A: 

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);
   }
}
ichiban
Thats not jQuery fashion.... this is ... $("#text2").css().removeAttr().val().datepicker();
Chad Grant
I agree, but compared to the original code, it's much better.
ichiban
A: 

Thanks you for immediate response!

It works :)

Praveen
A: 

thanks.. i was looking for this quite a while.

tarun