Disable Div On Load Is Not Working Why?

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 corre

Solution 1:

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:

 <inputtype="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.

Solution 2:

hide it?

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

Solution 3:

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();
   }

   });

Solution 4:

HTML:

<p>
    Click to change: <inputid="toggleElement"type="checkbox"name="toggle"onchange="toggleStatus()" /></p><divid="elementsToOperateOn">
            This is our example div block. <br />
            Sample Text Box: <inputtype="text"name="name" /><br />
            Sample Checkbox : <inputtype="checkbox"name="participate" /> 
........
    </div>

JS / JQuery:

functiontoggleStatus() {
    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