Question

选中复选框后，当我选择另一个下拉选项时，它仍会保持选中状态。我想在选择其他选项时取消选中它，但它没有这样做。当我使用bootstrap css时，代码无法正常工作。错误在哪里？

HTML：

<select class="form-control job-subcategory" autocomplete="off" name="job_subcategory">
    <option class="sub-catg-options" value="">Select Sub-Category(Optional)</option>
    <option class="electric-subcategory" value="Emergency Electricians">Emergency Electricians</option>
    <option class="electric-subcategory" value="Alarm Installer">Alarm Installer</option>
    <option class="electric-subcategory" value="Electrical Lighting">Electrical Lighting</option>
    <option class="electric-subcategory" value="Back Up Generators">Back Up Generators</option>
</select>

    <label class="residen-label">Type of services you require</label>

    <div class="btn-group" data-toggle="checkbox">
        <span class="button-checkbox">
            <button type="button" class="btn electric-appliances" data-color="primary">Wiring</button>
            <input type="checkbox" value="Wiring" name="ts-requires"  class="hidden" />
        </span>

        <span class="button-checkbox electric-ppoints">
            <button type="button" class="btn electric-appliances" data-color="primary">Powerpoints</button>
            <input type="checkbox" value="Powerpoints" name="ts-requires" class="hidden" />
        </span>

        <span class="button-checkbox light-fittings">
            <button type="button" class="btn electric-appliances" data-color="primary"> light-fittings</button>
            <input type="checkbox" value="Lighting fittings" name="ts-requires" class="hidden" />
        </span>

        <span class="button-checkbox electric-appliance">
            <button type="button" class="btn electric-appliances" data-color="primary">Appliances</button>
            <input type="checkbox" value="Appliances" name="ts-requires" class="hidden" />
        </span>

        <span class="button-checkbox">
            <button type="button" class="btn electric-appliances" data-color="primary">Solar Power</button>
            <input type="checkbox" value=" Solar Power" name="ts-requires" class="hidden" />
        </span>

        <span class="button-checkbox">
            <button type="button" class="btn electric-appliances" data-color="primary"> Switchboards</button>
            <input type="checkbox" value="Switchboards" name="ts-requires" class="hidden" />
        </span>         

        <span class="button-checkbox">
            <button type="button" class="btn electric-appliances" data-color="primary">Other</button>
            <input type="checkbox" value="Srequire Other" name="ts-requires" class="hidden" />
        </span>                             

    </div>          

</div>

我的JS代码：

$('.job-subcategory').change(function () {
    if ($('.job-subcategory').val() == "Emergency Electricians") {
        $(':checkbox').prop('checked', false);
    }
    else if ($('.job-subcategory').val() == "Alarm Installer") {
        $(':checkbox').prop('checked', false); 
    }
    else if ($('.job-subcategory').val() == "Electrical Lighting") {
        $(':checkbox').prop('checked', false);     
    }
    else if ($('.job-subcategory').val() == "Back Up Generators") {
        $(':checkbox').prop('checked', false);     
    }

    $('.btn-group').find('button-checkbox').removeClass('active');

    });

Answer 1

Mukto你想改变你的输入类型代码看起来像这样。

<input type="radio" value="Srequire Other" name="ts-requires" class="hidden" />

type =“radio”允许用户一次只选择一个项目，如果被选中则自动取消选择另一个项目！希望这有帮助！

JavaScript复选框检查相关问题

1 个答案: