dynamic radio validation

I need to show/hide some radio boxes based on another checkbox value.
E.g.

- checkbox checked:
radio1 with option1 option2 option3 shown and required
radio2 hidden

- checkbox unchecked
radio1 hidden
radio2 with optionA optionB optionC optionD shown and required

I know how to do that for other types of control. But it is long and prone to errors to add the javascript code to check all the radio options. And it makes it difficult to maintain the code.
The problem is that one has to add code for every option to change the validation dynamically, I didn't find a way to refer to, for example, radio1 or radio2. One has to write code for option1, option2 and so on.

For a textbox one can write:

      if ($('mycheck').checked)
      {
         $('mytextbox').addClass("validate['required']");
         formCheck_myform.register($('mytextbox'));

         $('anothertextbox').removeClass("validate\\['required'\\]");
         formCheck_myform.dispose($('anothertextbox'));
      } else...

Is there a similar and compact version for a radio box?

thank you
maxx

Hi emmexx,

No, I think that you can use the same way, maybe build a function with 2 arrays if you have a very long list of elements/values ?

Regards,
Max

Hi emmwxx,

You can use the MooTools group selectors to grab all the inputs inside a div (for example) and then use .each() to process the resulting array.

Here's an example for your case. There's a checkbox with the id='mycheck' and two radio arrays with the names q1 and q2.

var  mycheck, q1, q1_div, q2, q2_div;
window.addEvent('domready', function() {
    mycheck = $('mycheck');
    q1 = $$('#q1_container_div input');
    q1_div = $('q1_container_div');
    q2 = $$('#q2_container_div input');
    q2_div = $('q2_container_div');
    mycheck.addEvent('click', doCheck);
    doCheck();
});
function doCheck(){
    if ( mycheck.checked ) {
        q1_div.setStyle('display', 'none');
        q2_div.setStyle('display', 'block');
        q1.each(function(item){
            item.checked    = false;
            item.disabled   = true;
        });
        q2.each(function(item){
            item.disabled   = false;
        });
    } else {
        q1_div.setStyle('display', 'block');
        q2_div.setStyle('display', 'none');
        q2.each(function(item){
            item.checked    = false;
            item.disabled   = true;
        });
        q1.each(function(item){
            item.disabled   = false;
        });
    }
};

The code uses a useful FormCheck feature - disabled inputs aren't validated - so it disables the hidden group (and also unchecks them to keep the form clean in case they are re-enabled).

Bob

It works nice!

But one question: Is it possible to fade in/out ?

Hi tobisagt,

I haven't tried but I expect so.

Bob

Hi tobisagt,

There asre some MooTools methods reveal() and dissolve() that let you fade a section in and out. Here's a quick example that hides a div containing an input when a checkbox is checked:

function showHide() {
  var input = $('name');
  if ( checkbox.checked  ) {
    input.disabled = false;
    div.reveal();
  } else {
    input.value = '';
    input.disabled = true;
    div.dissolve();
  }
}