jQuery 移动复选框字段集（数据类型-水平）图标错误（未隐藏？）

Question

所以我正在使用 jQuery Mobile 的功能，通过字段集属性 Data-Type="Horizontal" 水平显示复选框；然而，即使所有的复选框图标都应该被隐藏，其中一个似乎正在努力通过地雷选项显示出来，如下所示：

为什么会这样？

<!--Mechanism of Injury-->
<label id="tcInjuryMechLabel" for="tcInjuryMech">
    <h3 id="tcInjuryMechHdr" class="headers">
        Mechanism of Injury: (Choose all that apply)
    </h3>
</label>
<fieldset id="tcInjuryMech" data-role="controlgroup" data-type="horizontal">
    <label id="tcInjuryMechOp1Label" for="tcInjuryMechOp1">
        Artillery
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp1" value="Artillery">

    <label id="tcInjuryMechOp2Label" for="tcInjuryMechOp2">
        Blunt
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp2" value="Blunt">

    <label id="tcInjuryMechOp3Label" for="tcInjuryMechOp3">
        Burn
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp3" value="Burn">

    <label id="tcInjuryMechOp4Label" for="tcInjuryMechOp4">
        Fall
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp4" value="Fall">

    <label id="tcInjuryMechOp5Label" for="tcInjuryMechOp5">
        Grenade
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp5" value="Grenade">

    <label id="tcInjuryMechOp6Label" for="tcInjuryMechOp6">
        GSW
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp6" value="GSW">

    <label id="tcInjuryMechOp7Label" for="tcInjuryMechOp7">
        IED
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp7" value="IED">

    <label id="tcInjuryMechOp8Label" for="tcInjuryMechOp8">
        Landmine
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp8" value="Landmine">

    <label id="tcInjuryMechOp8Label" for="tcInjuryMechOp8">
        MVC
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp8" value="MVC">

    <label id="tcInjuryMechOp9Label" for="tcInjuryMechOp9">
        RPG
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp9" value="RPG">

    <label id="tcInjuryMechOp10Label" for="tcInjuryMechOp10">
        Other (Specify Below)
    </label>
    <input type="checkbox" name="tcInjuryMechOp[]" id="tcInjuryMechOp10" value="Other" onchange="enableOtherMech();">
</fieldset>
<div id="tcInjuryMechOtherDiv">
    <input type="text" name="tcInjuryMechOther" id="tcInjuryMechOther"  placeholder="Other(Specify)" disabled>
</div>

Answer 1

您已将 id="tcInjuryMechOp8" 用于 2 个不同的复选框（Landmine 和 MVC）。

只要让所有的 ID 都独一无二，您的问题就会消失。

jQuery 移动复选框字段集（数据类型-水平）图标错误（未隐藏？）

jQuery Mobile Checkbox Fieldset (Data-Type-Horizontal) icon bug (not hidden?)

html

css

checkbox

fieldset

jquery-mobile