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.

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

回答2:

Do you mean disabling the inputs inside the div? I'm not into jQuery, but I guess it should be like: $( "#div > input" ).attr( "disabled" , "true" );.

Maybe without the true statement.

回答3:

This code works for me

Div

<span id="template_buttons">
  <button class="button">Button 1</button>
  <button class="button">Button 2</button>
  <button class="button">Button 3</button>
</span>

For disable all objects

$("#template_buttons *").attr("disabled", "disabled").off('click');

For Enable all objects

$("#template_buttons *").attr("disabled", false);

Check in jsfiddle http://jsfiddle.net/muthupandiant/orv2d9k1/1/

回答4:

$('#div_name :input').attr('disabled', true); //disable div input elements

$('#div_pjt :input').removeAttr('disabled');// enable div input elements

This code works for me

来源：https://stackoverflow.com/questions/8436468/disabling-enabling-div-using-jquery

标签

html

jquery-mobile