如果选中复选框 2，则禁用复选框 1

Question

我在 Firefox 插件的选项中有两个复选框。如果选中复选框二，我需要禁用复选框一。

函数 "onOpenedOptions" 在打开选项时检查变量（复选框二）的 true/false (checked/unchecked)，如果选中两个则禁用复选框一。

当我已经打开选项和 check/uncheck 复选框时，我需要更改第一个复选框的 "disabled attribute"。这里是 "onChangedCheckbox" 函数，但是 if(document.getElementById('checkboxTwo').checked) 不起作用

如何验证是否选中了 checkboxTwo？

另外 document.querySelector('#checkboxTwo') 也不起作用。这就是为什么我现在只使用 document

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);

Answer 1

我在没有 javascript 的情况下测试了这个，只有 xul，我没有运行遇到任何问题。尝试将首选项的 id 设置为不同。所以试试这个：

<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>

我很确定您不能在文档中使用相同的 id 值。您为首选项和复选框所做的。

Answer 2

我明白了。

xul:

<checkbox id="checkboxOne" preference="checkboxOne" label="Checkbox One"/>
<checkbox id="checkboxTwo" preference="checkboxTwo" oncommand="onChangedCheckbox(event.target)" label="Checkbox Two"/>

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(source) {
    if(source.checked) document.getElementById('checkboxOne').disabled=true;
    else document.getElementById('checkboxOne').disabled=false;
}

Answer 3

在 XUL 中，检查状态是通过属性模拟的。这意味着你可以这样做：if(document.getElementById('checkboxTwo').getAttribute("checked") == "true")

如果选中复选框 2，则禁用复选框 1

Checkbox 1 is disabled if Checkbox 2 is checked

javascript

checkbox

firefox-addon