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>

收音机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

首先，当您使用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会将其显示为已选中，因为active上的label课程未被删除。您必须从active中移除label类才能使其看起来像未经检查。

你可以试试@Fabian Picone的答案：

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

删除活动类。

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

JavaScript单选按钮检查相关问题

2 个答案: