$(".ui-datepicker-trigger").attr('disabled',true);
I am trying to disable the Image button something like this.. but its not working
but if I do its working
$(".ui-datepicker-trigger").hide(); hide is wokring but disabled is not working?
can any body tell me?
thanks
I added the img and bound a click handler using jQuery. So, when I disable everything else, I also unbind that click handler so the image button doesn't work anymore. Anyhow, here is an updated working example. I tested this in IE and FF. Let me know how it goes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(event){
alert("you clicked the link, everything should be disabled now.");
$(".ui-datepicker-trigger").attr('disabled',true);
$("img.ui-datepicker-trigger").unbind('click');
});
// add a click handler for the img element
$("img.ui-datepicker-trigger").bind('click', function() {alert('clicked the img');});
});
</script>
</head>
<body>
<button class="ui-datepicker-trigger">Disable Everything</button>
<br/>
<input type="text" id="txt1" class="ui-datepicker-trigger" value="textbox 1"></input>
<img class="ui-datepicker-trigger" src="calendar.jpg" alt="..." title="..." style="display: inline;">
</body>
</html>
Datepicker has a built-in disable method for this you can use, which also disables the text input, like this:
$("#datepicker").datepicker("disable");
You can view a demo here, you need to use this method if possible, because the datepicker actually tracks what's disabled internally, you can see the source code here.
The alternative would be to manually .unbind() the click from that image, like this:
$(".ui-datepicker-trigger").css({opacity:'0.5',cursor:'default'}).unbind('click');
You can see a demo of that here, the .css() part is just to give it some "disabled" styling :)