Question

每当我在元素的show call之前放置$(".Othertext").attr('required', '');时，无论按钮条件如何，它都会显示文本框。是否有任何方法可以使单击“其他”按钮时需要显示文本框？

<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="DF4">
     <input type="radio" id="DF4" class="mdl-radio__button" name="DF" value="4">
     <span class="mdl-radio__label">Other - please describe in detail</span>
</label>

<div class="Othertext">
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
         <input class="mdl-textfield__input" type="text" id="othertext">
         <span class="mdl-textfield__label">Describe...</span>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
      $(".Othertext").hide();
      $('input[type=radio][name=DF]').change(function() {
      if($(this).val() == 4)
          $(".Othertext").show();
      else
          $(".Othertext").hide();
      });
  });
</script>

Answer 1

这对我来说很好用：

$(document).ready(function(){
  $("#othertext").hide();
  $('input[type=radio][name=DF]').change(function() {
    if($(this).val() == 4) {
        $("#othertext").show();
        $("#othertext").attr('required', '');
    }            
    else {
        $("#othertext").hide();
        $("#othertext").removeAttr('required', '');
    }
  });

}）;

但是，如果在if语句中有超过1行，请记住使用括号。

如何在未隐藏元素时有条件地设置必需属性

1 个答案: