Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable the Image using class name.. using jquery

Tags:

jquery

$(".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

like image 585
user354625 Avatar asked Jun 25 '10 03:06

user354625


2 Answers

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

like image 192
Nick Craver Avatar answered Sep 28 '22 01:09

Nick Craver


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>
like image 44
dhillis Avatar answered Sep 28 '22 00:09

dhillis