Question

我有一个组单选按钮，它具有四个选项。脚本运行时，将通过Ajax调用的结果填充该组。这可以正常工作，但是我试图使用“ removeClass”和“ addClass”更改选中的单选选项的背景颜色。我的代码不起作用，任何人都可以看到我要去哪里哪里。

我正在使用的代码是：

var rl = 1; //result[17];
if (rl == 1) {
  $('#EditRoomLevel_1').prop('checked', true);
  if ($('#EditRoomLevel_1').is(':checked')) {
    $("#EditRoomLevel_1").removeClass('btn btn-primary form-check-label').addClass('btn btn-primary-conf form-check-label');
  }
}

.btn-primary {
  color: #333333;
  background-color: #CCCCCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  width: 175px;
  text-align: center;
  height: 13px;
  border-radius: 0 !important;
  border: 0.5px solid #CCC !important;
  margin-top: 1px;
}

.btn-primary-conf {
  color: #333333;
  background-color: #B7FFBA;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  width: 175px;
  text-align: center;
  height: 13px;
  border-radius: 0 !important;
  border: 0.5px solid #CCC !important;
  margin-top: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<label class="btn btn-primary form-check-label ">Name, text and logo<span class="rhidden"><input class="form-check-input" type="radio" name="EditRoomLevel" id="EditRoomLevel_1" value="1"></span></label>
<label class="btn btn-primary form-check-label ">Name and logo<span class="rhidden"><input class="form-check-input" type="radio" name="EditRoomLevel" id="EditRoomLevel_2" value="2"></span></label>
<label class="btn btn-primary form-check-label">Name only<span class="rhidden"><input class="form-check-input" type="radio" name="EditRoomLevel" id="EditRoomLevel_3" value="3" ></span></label>
<label class="btn btn-primary form-check-label">Logo only<span class="rhidden"><input class="form-check-input" type="radio" name="EditRoomLevel" id="EditRoomLevel_4" value="4" ></span></label>

在此先感谢您的帮助和时间。

Answer 1

尝试

var rl = 1; //result[17];
if (rl == 1) {
  $('#EditRoomLevel_1').prop('checked', true);
  if ($('#EditRoomLevel_1').is(':checked')) {
    $("#EditRoomLevel_1").parent().parent().removeClass('btn btn-primary form-check-label').addClass('btn btn-primary-conf form-check-label');
  }
}

您正在尝试删除不应该包含元素的类并在其上添加类，但其父级的父级应该具有该类，即标签。

Answer 2

要在更改单选按钮值时更改背景色，请尝试以下代码

$(".form-check-input").change(function() {
        if(this.checked) {
            if ($('.form-check-input:checked').length > 0) {
        var id = $('input[type=radio][name=EditRoomLevel]:checked').attr('id');
            $('label').removeClass('btn-primary-conf').addClass('btn-primary');
            $("#"+id).closest('label').removeClass('btn-primary').addClass('btn-primary-conf');
        }

        }
    });

Bootstrap单选组更改背景颜色（如果选中）

2 个答案: