使用jquery根据变量更改要检查的单选按钮的值

Question

我正在尝试使用变量值来更改要选中的单选按钮的值。我知道变量正在工作，因为我能够更改父元素的CSS。

// CODE to alter the current grade options

if (CG == "F") {

//this is not working
    $( "#currentOption1" ).prop('checked', true );
    $("#currentOption2").prop('checked', false);
    $("#currentOption3").prop('checked', false);
    $("#currentOption4").prop('checked', false);
    $("#currentOption5").prop('checked', false);

// this is working - set the class to active for the appearance of the label being selected
    $("#currentOption1").parent().addClass("active");
    $("#currentOption2").parent().removeClass("active");
    $("#currentOption3").parent().removeClass("active");
    $("#currentOption4").parent().removeClass("active");
    $("#currentOption5").parent().removeClass("active");

<!-- CWK current grade Options -->
      <h6>Current Grade</h6>
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption1" autocomplete="off"> Fail
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption2" autocomplete="off"> Nearly Pass
        </label>
        <label class="btn btn-secondary" >
          <input type="radio" name="currentOptions" id="currentOption3" autocomplete="off"> Pass
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption4" autocomplete="off"> Merit
        </label>
        <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption5" autocomplete="off"> Distinction
        </label>
      </div>

我想更改html，使每个相应的单选按钮变为选中或取消选中。它目前没有改变任何东西。

html包含bootstrap模式，并使用bootstrap将无线电设置为一系列按钮的样式。

Answer 1

之后可能会有一些代码撤消.prop('checked', true)。我拿了你的代码，把它包装在$(document).ready()中，并设置了CG = "F"。选中的css和父css都会按预期应用。

​

$(document).ready(function() {
  let CG = "F";

  // CODE to alter the current grade options

  if (CG == "F") {

    //this is not working
    $("#currentOption1").prop('checked', true);
    $("#currentOption2").prop('checked', false);
    $("#currentOption3").prop('checked', false);
    $("#currentOption4").prop('checked', false);
    $("#currentOption5").prop('checked', false);

    // this is working - set the class to active for the appearance of the label being selected
    $("#currentOption1").parent().addClass("active");
    $("#currentOption2").parent().removeClass("active");
    $("#currentOption3").parent().removeClass("active");
    $("#currentOption4").parent().removeClass("active");
    $("#currentOption5").parent().removeClass("active");
  }
});

.active {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CWK current grade Options -->
<h6>Current Grade</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption1" autocomplete="off"> Fail
        </label>
  <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption2" autocomplete="off"> Nearly Pass
        </label>
  <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption3" autocomplete="off"> Pass
        </label>
  <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption4" autocomplete="off"> Merit
        </label>
  <label class="btn btn-secondary">
          <input type="radio" name="currentOptions" id="currentOption5" autocomplete="off"> Distinction
        </label>
</div>

​