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包含一个引导程序模态，并使用引导程序将无线电设置为一系列按钮的样式。

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>

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

1 个答案: