如果在编辑模式下选择选项值，则在标签上添加活动类？

Question

我使用了材料设计表单，但问题是单击在标签中添加活动类后。如果在编辑模式下选择任何值，您可能会添加活动类。我尝试在标签中添加活动类，但这适用于所有标签如何特定选择标签添加活动类。'

HTML：

 <div class="vc_col-sm-6 wpb_column column_container">
     <div class="md-form dropdown"> 
         <label for="login_type" class="control-lbl">Login Type <span>*</span> <div class="tooltip help"><i class="fas fa-info-circle"></i><span class="tooltiptext">Attendee needs to enter email and pin in case login is required. </span></div></label>
          <select required="" class="form-control select-form valid" type="text" name="login_type" id="login_type" aria-invalid="false">
            <option value="" selected=""></option>
            <option value="1">Required</option>
            <option value="2">Optional</option>
            <option selected="" value="0">No Login</option>
          </select>
       </div>
   </div>

jquery：

<script type="text/javascript">
    var r1 = $( "select option:selected" ).text();
    if (r1.length != 0){
        $('label.control-lbl').addClass("active");  
        }
    else{
        $('label.control-lbl').removeClass("active");   
    }

</script>

Answer 1

在 JQuery 中使用 [attribute*=value] 选择器。将您的选择器修改为此

$("label[for*='login_type']").addClass("active");

更多here

---

更新

$("select").each(function() {
  $(this).on("change", function() {
    if ($(this).children("option:selected").text() == "Optional") {
      $(this)
        .parent()
        .children("label")
        .addClass("active");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="vc_col-sm-6 wpb_column column_container">
  <div class="md-form dropdown">
    <label for="login_type" class="control-lbl">Login Type <span>*</span> <div class="tooltip help"><i class="fas fa-info-circle"></i><span class="tooltiptext">Attendee needs to enter email and pin in case login is required. </span></div></label>
    <select required="" class="form-control select-form valid" type="text" name="login_type" id="login_type" aria-invalid="false">
      <option value="" selected=""></option>
      <option value="1">Required</option>
      <option value="2">Optional</option>
      <option selected="" value="0">No Login</option>
    </select>
  </div>
</div>

<div class="vc_col-sm-6 wpb_column column_container">
  <div class="md-form dropdown">
    <label for="login_type" class="control-lbl">Login Type <span>*</span> <div class="tooltip help"><i class="fas fa-info-circle"></i><span class="tooltiptext">Attendee needs to enter email and pin in case login is required. </span></div></label>
    <select required="" class="form-control select-form valid" type="text" name="login_type" id="login_type" aria-invalid="false">
      <option value="" selected=""></option>
      <option value="1">Required</option>
      <option value="2">Optional</option>
      <option selected="" value="0">No Login</option>
    </select>
  </div>
</div>