0

I want to disable the div on load , then enable it on click of botton. Or on the other words i want to invisible it when it load and load it when user click.

Frist, is that a correct strategy to load a div in disable mode then enable it , or shall I append it to body after loading ?

Second, here is my code , I have checked many similar questions, my browser is chrome and yet it is not working, I dont know why can you help me through this ?

<div class="test_dis" style="left:170px; top:128px;" >
  this is a test to see if 
  i can disable it on load or not
   <div>child </div>
</div>

$(document).load(function(e) { // shall it be on Load or Ready ?
     //.attr("disabled","disabled"); both are not working !
     $('.test_dis').attr('disabled',true);
});

Thank you ,

Emax
  • 1,007
  • 2
  • 13
  • 16
  • Are you asking how to make a div invisible and then later show it? It doesn't really make sense to "disable" a div - what do you mean by that? – nnnnnn Dec 12 '11 at 01:17

4 Answers4

4

It's not working because you can't disable a div element. That only works for form elements.

HTML spec:

"The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA."

For elements where disabling works, you should set the HTML attribute so that the element is disabled already when it's created, rather than disabling it after it is created. Example:

 <input type="text" name="Info" disabled="disabled" />

The ready event happens earlier than the load event, so any adjustments that you can't do directly in the HTML elements, you should do in the ready event. The ready event happens when the document has loaded, while the load event happens when all the content on the page (images et.c.) also has been loaded.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
0

HTML:

<p>
    Click to change: <input id="toggleElement" type="checkbox" name="toggle" onchange="toggleStatus()" />
</p>

    <div id="elementsToOperateOn">
            This is our example div block. <br />
            Sample Text Box: <input type="text" name="name" /> <br />
            Sample Checkbox : <input type="checkbox" name="participate" /> 
........
    </div>

JS / JQuery:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#elementsToOperateOn :input').attr('disabled', true);
    } else {
        $('#elementsToOperateOn :input').removeAttr('disabled');
    }   
}

Source: Disable And Enable Input Elements In A Div Block Using jQuery

Ejrr1085
  • 975
  • 2
  • 16
  • 29
0

hide it? 

$(document).ready(function() { 
   $('.test_dis').hide();
});
Lloyd
  • 8,204
  • 2
  • 38
  • 53
  • Can you please write you answer on this ticket too, with respect of children of div . http://stackoverflow.com/questions/8423812/enable-disable-a-div-and-its-elements-in-javascript – Emax Dec 12 '11 at 12:46
0

Hiding it will work but will need a container of the same dimensions & positioning, eg. 

<div class="test_dis_container" style="left:170px; top:128px;" >

Then add a function to the container so that you can show the div on click:

   $(document).ready(function() { 
   $('.test_dis').hide();

   $('.test_dis_container').click(function() {
   $('.test_dis').show();
   }

   });
Francis Kim
  • 4,235
  • 4
  • 36
  • 51
  • 1.Why it needs a container ? 2. Can I use a .Children() and Hide everything inside it ? – Emax Dec 12 '11 at 12:41