Checkbox 1 is disabled if Checkbox 2 is checked

Question

I have two checkboxes in Firefox addon's options. I need checkbox one be disabled if checkbox two is checked.

Function "onOpenedOptions" checks true/false (checked/unchecked) of variable (checkbox two) when options are opened & disables checkbox one if two is checked.

And I need to change the "disabled attribute" of checkbox one when I've already opened options & check/uncheck checkbox two. Here is "onChangedCheckbox" function, but if(document.getElementById('checkboxTwo').checked) doesn't work

How to verify if checkboxTwo is checked?

Also document.querySelector('#checkboxTwo') doesn't work. That's why I'm just using document now

options.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<prefwindow id="test_prefwindow" title="Test" 
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <prefpane id="test_prefpane" label="Preferences" >
        <preferences>
            <preference id="checkboxOne" name="extensions.checkboxOne" type="bool"/>
            <preference id="checkboxTwo" name="extensions.checkboxTwo" type="bool"/>
        </preferences>

        <row style="display:inline-block">
            <checkbox id="checkboxOne" preference="checkboxOne" label="Checkbox One" style="vertical-align:middle;"/>
            <checkbox id="checkboxTwo" preference="checkboxTwo" label="Checkbox Two" style="vertical-align:middle;"/>
        </row>
    </prefpane>
    <script type="application/x-javascript" src="chrome://test/content/options.js"/>
</prefwindow>

options.js:

function onOpenedOptions() {
    var prefManager = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
    if (prefManager.getBoolPref("extensions.checkboxTwo"))
        document.getElementById('checkboxOne').disabled=true;
}
document.addEventListener('DOMContentLoaded', onOpenedOptions);

function onChangedCheckbox() {
    if (document.getElementById('checkboxTwo').checked) 
        document.getElementById('checkboxOne').disabled=true;
    else document.getElementById('checkboxOne').disabled=false;
}
document.addEventListener("click", onChangeCheckbox);
//document.querySelector('#checkboxTwo').addEventListener("click", onChangedCheckbox);

Noitidart Noitidart · Accepted Answer · 2015-08-11T07:45:33

I tested this without the javascript, just the xul and I didnt run into any issues. Try setting the id on the preferences to be different. So try this:

<prefpane id="test_prefpane" label="Preferences" >
    <preferences>
        <preference id="PREFERENCE____checkboxOne" name="extensions.checkboxOne" type="bool"/>
        <preference id="PREFERENCE____checkboxTwo" name="extensions.checkboxTwo" type="bool"/>
    </preferences>

    <row style="display:inline-block">
        <checkbox id="checkboxOne" preference="PREFERENCE____checkboxOne" label="Checkbox One" style="vertical-align:middle;"/>
        <checkbox id="checkboxTwo" preference="PREFERENCE____checkboxTwo" label="Checkbox Two" style="vertical-align:middle;"/>
    </row>
</prefpane>

I am pretty sure you can't use the same id value in a document. Which you were doing for the preference and for the checkbox.

Checkbox 1 is disabled if Checkbox 2 is checked

3 Answers