javascript - How to conditionally set required attribute when element is not hidden - Stack Overflow

admin管理员组

文章数量:1023230

Whenever I place a $(".Othertext").attr('required', ''); before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?

<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=".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>

Whenever I place a $(".Othertext").attr('required', ''); before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?

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

• javascript
• html
• laravel

Share Improve this question Follow edited Jun 19, 2017 at 18:57 epictaco24 asked Jun 19, 2017 at 18:22 epictaco24epictaco24 8122 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This works fine for me:

$(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', '');
    }
  });
});

However remember to use brackets when you have more then 1 line in the if statement.

Whenever I place a $(".Othertext").attr('required', ''); before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?

<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=".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>

Whenever I place a $(".Othertext").attr('required', ''); before the show call for the element it shows the textbox regardless of the button condition. Is there any way to make it so that the textbox is required and shown when the Other button is clicked?

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

• javascript
• html
• laravel

Share Improve this question Follow edited Jun 19, 2017 at 18:57 epictaco24 asked Jun 19, 2017 at 18:22 epictaco24epictaco24 8122 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

This works fine for me:

$(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', '');
    }
  });
});

However remember to use brackets when you have more then 1 line in the if statement.

本文标签： javascriptHow to conditionally set required attribute when element is not hiddenStack Overflow