Изменение значения переключателя для проверки на основе переменной с помощью jquery - PullRequest
Новая
       27

Изменение значения переключателя для проверки на основе переменной с помощью jquery

0 голосов
/ 30 мая 2019

Я пытаюсь использовать значение переменной, чтобы изменить значение переключателя, который нужно проверить. Я знаю, что переменная работает, так как я могу изменить 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 содержит модальный загрузчик и использует начальный загрузчик для стилизации радио в виде серии кнопок.

1 Ответ

0 голосов
/ 30 мая 2019

Вероятно, есть какой-то код, который отменяет .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>
...