JavaScript 单选按钮检查相关问题

Question

选中一个单选按钮后，当我选择另一个选项时，它仍然处于选中状态。当我选择另一个选项时，我想取消选中它，但它没有这样做。当我使用引导 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>

收音机 1（预选） 电台 2 电台 3

我的 JS 代码：

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

});

Answer 1

这里的问题在于引导 css。即使您的 js 取消选中收音机，css 仍将其显示为选中，因为 label 上的 active 类未删除。您必须从 labels 中删除 active 类，使它们看起来像未选中。

您可以从@Fabian Picone 的回答中尝试此代码：

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

删除活动类。

这是小提琴http://jsfiddle.net/k7moorthi/qqwLgr94/1/

Answer 2

首先，当您使用引导程序时，加载 DOM 需要比几乎空白页面更长的时间。因此，请在您的文档准备好时注册您的 change 事件（请参阅下面的代码）。另一件事是，引导程序在 <select> 元素之外添加了其他元素，并带有自己的类。我在 change 事件代码的末尾添加了删除类。

我在您的 JS 代码中添加了更改，它适用于我的引导程序：

<!-- If jQuery is not already implemented -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

    $( document ).ready(function() {

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

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

        });
    });
</script>