jquery - Changing the value of a radio button to be checked based upon a variable using jquery

Question

I am trying to use a variable value to change the value of a radio button to be checked. I know the variable is working as I am able to change the CSS of the parent element.

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

I want to change the html so that each corresponding radio button becomes checked or unchecked. It isn't changing any at present.

The html is contained with a bootstrap modal and uses bootstrap to style the radio as a series of buttons.

标签： jquerybootstrap-4radio-button

Answer 1

可能有一些代码在.prop('checked', true)之后撤消。我拿走了你的代码，把它包装起来$(document).ready()并设置CG = "F". 已检查和父 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>