Question

I have a link_to_function with image tag. I want to disable it (make its image blur n disable click event) for page load. But anothr button named “button 1” is clicked then only it should be enabled. How can i accomplish it?

Css for image with link is

.img  
{
opacity:0.4;
filter:alpha(opacity=40); 
} 

View is ….

<%i = 1%>
<div id = "file_<%= i %>" class = "file">
<%= link_to_function image_tag("play_images.png",:width => 30, :height => 30,:align => 'left', :title => 'Play', :id => "img_play#{i}"), :id => "play_#{i}"%>
&nbsp;&nbsp;<%= link_to_function image_tag("stop_images.png",:width => 30, :height => 30,:align => 'left', :title => 'Stop', :id => "img_stop#{i}",:class => "img"), :id => "stop_#{i}"%>
<%= link_to_function image_tag("fast_fwd.jpeg",:width => 30, :height => 30, :title => 'Fast farword', :id => "img_ff#{i}", :class => "img"), :disabled => 'true',:id => "ff_#{i}"%>

<%= link_to_function image_tag("images.jpeg",:align => 'right'), :id => "close_#{i}"%>
 <div id = "request_<%= i%>" class = "request">
   </div>
 </div>
 <%i = i + 1%>

Now, here what i want is initially 2 image button with class “img” will be blured and disabled to, and as i click on button with id “play_#”, both button with class “img” will remove their classes and they wll b enabled. So how can i make them disable on load and enable when play button is clicked. My jquery is…

   function set_file(id,time,user,node,activity)
    {
     var filename = "";
       filename = user+"_"+node+"_"+activity+"_"+time;

        jQuery("#log_"+id).ready(function() {
        jQuery("#file_"+id).dialog({modal: true, resizable: false, draggable: false,
                 title: "File Content", width: 520,

       });
        jQuery("#play_"+id).click(function(){
          jQuery("#img_stop"+id).removeClass();
          jQuery("#img_ff"+id).removeClass();
                    text="content of text here";
                    delay=500;
                    currentChar=1;
                    destination="[not defined]";
       jQuery.get('/requests/download_log/?filename=' + filename, function(data) {
    });

});
jQuery("#stop_"+id).click(function(){
    jQuery("#img_ff"+id).addClass('img');
    jQuery("#img_stop"+id).addClass('img');
   alert("Stop");
  });
   jQuery("#ff_"+id).click(function(){
  alert("Fast Forward");
  });
 }

Answer 1

please describe your problem more exactly, e.g. post some code.

maybe you try to do something like that:

jQuery(document).ready(function() {
    var $button1 = jQuery('#button1');
    var $button2 = jQuery('#button2').attr('disabled', 'disabled');

    $button1.click(function() {
        if ($button2.is(':disabled')) {
            $button2.removeAttr('disabled');
        } else {
            $button2.attr('disabled', 'disabled');
        }
    });

    $button2.click(function() {
        alert('button2 - click');
    });
});​

try it here: http://jsfiddle.net/f9F9z/2/