JavaScript单选按钮检查相关问题

Question

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

电台 1（预selected）收音机 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

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

我在你的 JS 代码中添加了更改，它适用于我 bootstrap:

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

Answer 2

这里的问题是 bootstrap css。即使您的 js 取消选中无线电，css 仍将其显示为选中状态，因为 label 上的 active class 未被删除。您必须从 label 中删除 active class 以使它们看起来像未选中。

您可以试试@Fabian Picone 的回答中的这段代码：

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

删除活动 class。

这里是fiddlehttp://jsfiddle.net/k7moorthi/qqwLgr94/1/

JavaScript单选按钮检查相关问题

JavaScript radio button checking related issue

html

javascript

radio-button

twitter-bootstrap