Hozefa Hozefa - 5 months ago 8
HTML Question

Disabling/Enabling div using jquery

I am relatively new to jQuery. I am working on an application to create a widget for accepting donations for NGO.

<div data-rle="content" id="save">
<label for="saveWidget">Save your Widget before posting in online:</label>
<input type="submit" value="Save Widget" id="saveWidget"
data-theme="b" data-inline="true" />
</div>
<div data-rle="content" id="post">
<fieldset data-role="controlgroup">
<legend>Select on option for posting your online:</legend>
<input type="radio" name="submit" id="html" value="hmtl"
checked="checked" /> <label for="html">Please provide
the HTML - I'll post it myself. <br>The HTML will be
displayed below.</label>
<input type="radio" name="submit" id="blog" value="blog" /> <label
for="blog">Go to Blogger</label>
</fieldset>
<input type="submit" value="Get HTML" id="submitWidget"
data-theme="b" data-inline="true" />
</div>


My goal is to have the div with
id="post"
disabled in the start, and when user clicks on save I want to enable the div. I tried using
$('#post').attr('disabled', true);
but it does not seem to work. The div does not get disabled
Any ideas on how to achieve this.

Answer

maybe something like this: http://jsfiddle.net/MTQzD/?

When document is ready disable all inputs in #post. Also give #post a color of your choice in your css (e.g. lightGray).
Then when "Save Widget" is clicked, enable the inputs and remove the color of the #post div.

$(document).ready(function() {
    $('input[type=radio]').attr('disabled', true);
    $('#submitWidget').attr('disabled', true);
});

$("#saveWidget").click(function() {
    $('input[type=radio]').attr('disabled', false);
    $('#submitWidget').attr('disabled', false);
    $('#post').css("background-color", "#EAEAEA");
});