Question

Im working on a wordpress plugin. In the admin panel, I have a fieldset and a checkbox. I would like to toggle the fieldset between disabled/enabled by checking/unchecking the checkbox.
Here is what I have so far, but it doesn’t seem to work.

HTML

<!-- This is the checkbox -->
<label>
    <input class="checkbox" type="checkbox" onchange="toggleDisable(this);" id="check"/> 
    enable
</label>

<!-- This is the field set -->
<fieldset id="field_set">
    <legend>Field-Set</legend>

    <label for="sel">selectBox</label>
    <select id="sel">
        <option value="posts">Posts</option>
        <option value="terms">Terms</option>
    </select>

    <label for="1">input</label>
    <input type="text" value="text" id="1" />

    <label for="2">input</label>
    <input type="text" value="text" id="2" />

</fieldset>

JavaScript

function toggleDisable(checkbox) {
    var toggle = document.getElementById("field_set");
    checkbox.checked ? toggle.disabled = false : toggle.disabled = true;
}

The event is not being fired, and nothing happens with the fieldset.
Oh, and here is a Fiddle.

Answer 1

Yout code is okay. The problem is in your fiddle. When you select onLoad and no No library it means that your javascript code will be placed inside window.onload closure:

window.onload = function() { /* your code will go here */ }

So in this case the function you define becomes a local scope function which is not available for the rest of the page. So to fix your problem you just need to select no wrap (head) for example. See this:

http://jsfiddle.net/AY3Ka.