Hide and disable with jQuery/JavaScript

Question

I have a section of my page that I want to hide when the user clicks a certain radio button. But in addition to hiding the area, I want disable all inputs in that area. I also want to bring back the area when the user hits another button.

What is the best way to go about doing this?

listen for the click event on the radio button, if it is checked, hide the div/span. else show . You should be able to do it yourself. check out the jQuery documentation. This is how you learn — Shyju, Aug 14 '12 at 17:53
After asking more than 80 questions on SO, you should know that without codes people cannot help you as it should. — Ram, Aug 14 '12 at 17:54
I would start by reading http://api.jquery.com/hide/ and [How to disable all `` inside a form with jQuery?](http://stackoverflow.com/questions/1416900/how-to-disable-all-input-inside-a-form-with-jquery) — Felix Kling, Aug 14 '12 at 17:54

thecodeparadox · Accepted Answer · 2012-08-14T17:58:13.703

7

You can try something like below:

$('#make_hide_button').on('click', function() {
  $('#target_area').hide().find('input, textarea').prop('disabled', true);
});

$('#make_show_button').on('click', function() {
  $('#target_area').show().find('input, textarea').prop('disabled', false);
});

edited Aug 14 '12 at 17:58

answered Aug 14 '12 at 17:54

thecodeparadox

86,271
21
138
164

score 4 · Answer 2 · answered Aug 14 '12 at 17:54

As you have specified no current code you are working with I can only give you a few general guidelines.

Have a look at jQuery hide():

$("#myDivId").hide();

Check how to bind click events using on()

$("#MyRadioButton").on("click", function(){
    $("#myDivId").hide();
});

$("#MyOtherButton").on("click", function(){
    $("#myDivId").show();
});

To disable/enable elements:

$("#MyElementId").prop("disabled", false);

$("#MyElementId").prop("disabled", true);

Again, this is something to get your started, ones you have some code you experience issues with, please feel free to post it and I'm sure we can manage to help you out.

+1 For the constructive guidelines. – Ram Aug 14 '12 at 18:09 — Ram, Aug 14 '12 at 18:09

Travis J · Answer 3 · 2012-08-14T18:05:34.270

More code in your question would definitely have a strong relation to having code in answers.

That being said, a general approach is going to be making sure you know which area the input was in. Perhaps with data- attributes or a javascript array of ids, or maybe by classname.

Once the area is well defined, you can hide the radio button, and then iterate through the defined area disabling any elements which are of type input.

EDIT

Assumptions:

you want the entire form disabled if the radio button is clicked:

your radio button has an id of "radButt"

<script type="text/javascript">
 function GetParentForm(elem) {
    while (elem && elem.nodeName && elem.nodeName.toUpperCase() != "FORM") {
        elem = elem.parentNode;
    }
    return elem;
 }

 var changeState = 0;
 $("#radButt").click( function() {
   $(this).hide();
   var thisForm = GetParentForm( $(this)[0] );
   $(thisForm).find('input').prop('disabled', true);
 });
</script>

Hide and disable with jQuery/JavaScript

3 Answers3