Question

I have an application that uses Yui 2.0 and some custom JS. I did not write it originally so I am not really familiar with the Yui JS tools. For this problem I will look at three radio buttons and one text input.

The behavior right now is that when you select radio button s3 you enable text input toEnable.

What I would like to see is that when you select radio button S2 or S3 toEnable is enabled. However using the following example what happens is that once you try and use the NCRS_bind_to_radio method on S2, S3 loses the ability to effect the toEnable input all together.

Anyone have any idea how I can get this input enabled/disabled with both radio buttons?

<ul>
  <li><label><input value="MET" type="radio" name="selector" id="s1"> 1</label></li>
  <li><label><input value="MET" type="radio" name="selector" id="s2"> 2</label></li>
  <li><label><input value="MET" type="radio" name="selector" id="s3"> 3</label></li>
<ul>

<input id="change" type="text" name="toEnable">

//S2 is the new addition here, bind for s3 has been around and works by itself, not with s2
NCRS_bind_to_radio('toEnable', 's2', true, true)
NCRS_bind_to_radio('toEnable', 's3', true, true)


function NCRS_bind_to_checkbox(input, checkbox, required, autofocus){ 
    // Bind an input to a checkbox. 
    // i.e., the input is disabled until the checkbox is checked
    // If "required", then "validate-required" is added/removed as needed. 
    // If "autofocus", then when the checkbox is checked, this field
    // automatically gets focus. 
    if (typeof checkbox == "string") {
        checkbox=document.getElementById(checkbox);
    }
    if (typeof input == "string") {
        input = document.getElementById(input);
    }

    YAHOO.util.Dom.removeClass(input, 'validate-required');
    if (required) { 
        YAHOO.util.Event.addListener(input, "blur", 
                NCRS_forms_passive_check_text, input, true)
    }

    input.disabled = !checkbox.checked;

    // Set initial state of "validate-required"
    if (checkbox.checked && required) { 
        YAHOO.util.Dom.addClass(input, 'validate-required');
    }

    // Add a "click" listener to the checkbox/radio
    YAHOO.util.Event.addListener(checkbox, "click", function() { 
        if (checkbox.checked) { 
            input.disabled = false;
            if (autofocus) { 
                input.focus();
            }
            if (required) { 
                YAHOO.util.Dom.addClass(input, 'validate-required');
            }
        } else { 
            NCRS_forms_set_error(input, true)
            YAHOO.util.Dom.removeClass(input, 'validate-required');
            input.disabled = true;
        }
    });

    // If parent is a "radio" input, also add listeners to sibling radios. 
    if (checkbox.type == 'radio') {
        var item;
        for (var i=0; i < checkbox.form[checkbox.name].length; i++) {
            item = checkbox.form[checkbox.name][i]
            if (item != checkbox) {
                // Add a "click" listener to the checkbox/radio
                YAHOO.util.Event.addListener(item, "click", function() { 
                    if (!checkbox.checked) { 
                        NCRS_forms_set_error(input, true)
                        YAHOO.util.Dom.removeClass(input, 'validate-required');
                        input.disabled = true;
                    }
                })
            }
        }
    }

    // Add a "click" listener to the dependent input.
    // This was intended to re-enabled a disabled input,
    // but doesn't work?
    YAHOO.util.Event.addListener(input, "click", function() {
        if (!checkbox.checked) { 
            checkbox.click();
            input.focus();                
        }
    });
}

NCRS_bind_to_radio = NCRS_bind_to_checkbox

Answer 1

The problem is that when one radio button is selected the others are deselected. I believe that when you select S3 the input is enabled briefly, then S2’s deselect disables the input.

I would modify the method to take an array of inputs, and change this bit of code:

if (!checkbox.checked)
{ 
  NCRS_forms_set_error(input, true)
  YAHOO.util.Dom.removeClass(input, 'validate-required');
  input.disabled = true;
}

to something like:

var state = true;
for (radio in radioArray)
{
  state = state && !radio.checked;
}

if (state)
{ 
  NCRS_forms_set_error(input, true)
  YAHOO.util.Dom.removeClass(input, 'validate-required');
  input.disabled = true;
}

I’ve worked with YUI a bit and let me offer you a tip to simplify your code. Instead of doing this:

if (typeof checkbox == "string")
{
  checkbox=document.getElementById(checkbox);
}
if (typeof input == "string")
{
  input = document.getElementById(input);
}

you can take advantage of YUI’s DOM utilities.

var Dom = YAHOO.util.Dom;

checkbox = Dom.get(checkbox);
input = Dom.get(input);

YUI will check whether it’s a string or not under the hood and always give you a reference to the element, even if you pass an element into get().

Paul