CODEWITHSUNDEEP
javascriptjqueryzend-framework
awestover89
awestover89

Reputation: 1763

Jquery/Zend toggling element disabled not working

I have a Zend form that has two checkboxes, if the first is unchecked the second should be disabled.

The two elements are:

    $element = $this->createElement('checkbox','show_assessments');
    $element->setLabel('Do you want to view assessments?');
    $element->setAttrib('onchange', 'javascript:toggleElement("show_assessments", "show_expired")');
    $element->clearDecorators();
    $element->addDecorator('StandardTable');
    if($preferences['show_assessments'])
        $element->setValue(1);
    $this->addElement($element);
    $this->_elementNames[] = 'show_assessments';

    $element = $this->createElement('checkbox','show_expired');
    $element->setLabel('Include expired programs?');
    if(!$preferences['show_assessments'])
        $element->setAttrib('disable', true);
    $element->clearDecorators();
    $element->addDecorator('StandardTable');
    if($preferences['show_expired'])
        $element->setValue(1);
    $this->addElement($element);
    $this->_elementNames[] = 'show_expired';

and my Javascript function to toggle the elements is:

    function toggleElement(sender, receiver)
    {
        if (!sender || !receiver) return;
            if ($('#'+sender).is(':checked'))
            {
                    $('#'+receiver+' :input').removeAttr('disabled');
                    alert(receiver+' is now enabled');
            }
            else
            {
                    $('#'+receiver+' :input').attr('disabled', true);
                    alert(receiver+' is now disabled');
            }
            if ($('#'+receiver).is('checked'))
                    alert(receiver+' is checked');
            else
                    alert(receiver+' is not checked');
    }

The problem is that the last if statement, checking if receiver is checked, is false no matter what, and receiver is never toggled. Any ideas?

Edit:

It seems to always have a problem with the second element. I tried reversing it, so show_expired was the sender and show_assessments was the receiver and this time it could tell when show_expired was checked, but couldn't tell for show_assessments.

Upvotes: 0

Views: 458

Answers (2)

awestover89
awestover89

Reputation: 1763

Got it to work without jQuery

function toggleElement(sender, receiver)
{
var sendEl = document.getElementById(sender);
var recEl = document.getElementById(receiver);
if (sendEl.checked)
    recEl.disabled = false;
else
    recEl.disabled = true;
}

Upvotes: 1

samandmoore
samandmoore

Reputation: 1231

It could be your javascript has a typo in it:

function toggleElement(sender, receiver)
{
    if (!sender || !receiver) return;
        if ($('#'+sender).is(':checked'))
        {
                $('#'+receiver+' :input').attr('disabled', false); // <-- use attr('disabled', false instead)
                alert(receiver+' is now enabled');
        }
        else
        {
                $('#'+receiver+' :input').attr('disabled', true);
                alert(receiver+' is now disabled');
        }
        if ($('#'+receiver).is(':checked')) // < -- should be .is(':checked')
                alert(receiver+' is checked');
        else
                alert(receiver+' is not checked');
}

That second IF statement is incorrectly missing the colon before 'checked'.

Upvotes: 1

Related Questions