Question

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 1

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