How to add and remove a required attribute with a Toggle

问题

My users have access to a form.

To simplify the task I put a selectable list but if the answer is not in the list, they can add a reason manually

The selectable list is required by default but if the user accesses the text field it becomes required and the list is no longer required (and vice versa).

HTML:

<div class="form-group">
  <select name="motif" class="form-control input-lg" required>
    <option selected="true" disabled="disabled" value="">Select</option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</div>

<div class="form-group">
  <input name="messagetick" id="messagetick2" type="checkbox" value="yes" /> Other
</div>
<div id="motif-reject" class="form-group" style="display: none">
  <textarea class="form-control" rows="5" placeholder="reason" name="motif-text"></textarea>
</div>

JS:

$('input[name="messagetick"]').click(function() {
    $('#motif-reject').toggle(this.checked);
});

You can see the JsFiddle: https://jsfiddle.net/rkkdhant/

I do not know how to do with a toggle, can you help me?

回答1:

You can use the same boolean you're using to toggle the textarea: this.checked. Then set the required property to your motif select and motif-text textarea like this:

$('input[name="messagetick"]').click(function () {
    $('#motif-reject').toggle(this.checked);
    $("textarea[name='motif-text']").prop("required", this.checked);
    $("select[name='motif']").prop("required", !this.checked);
});

Please try the following snippet:

$('input[name="messagetick"]').click(function () {
    $('#motif-reject').toggle(this.checked);
    $("textarea[name='motif-text']").prop("required", this.checked);
    $("select[name='motif']").prop("required", !this.checked);
    console.log("Checkbox check: " + this.checked);
    console.log("Textarea required: " + $("textarea[name='motif-text']").prop("required"));
    console.log("Select required: " + $("select[name='motif']").prop("required"));
    console.log("----------------------------------");
});

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

<div class="form-group">
    <select name="motif" class="form-control input-lg" required>
        <option selected="true" disabled="disabled" value="">Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</div>

<div class="form-group">
    <input name="messagetick" id="messagetick2" type="checkbox" value="yes" />
    Other
</div>
<div id="motif-reject" class="form-group" style="display: none">
    <textarea class="form-control" rows="5" placeholder="reason" name="motif-text"></textarea>
</div>

回答2:

Html :

<div class="form-group">
 <select name="motif" class="form-control input-lg">
  <option selected="true" disabled="disabled" value="">Select</option> 
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
 </select>
</div>

<div class="form-group">
  <input name="messagetick" id="messagetick2" type="checkbox" value="yes" /> 
   Other
 </div>
 <div id="motif-reject" class="form-group" style="display: none">
   <textarea class="form-control" rows="5" placeholder="reason" name="motif-text">
  </textarea>
 </div>

JS:

if(!$('#messagetick2').is(':checked')){
 $("select").prop('required',true);
}

    $('input[name="messagetick"]').click(function() {
    $("select").prop('required',false);
    $('#motif-reject').toggle(this.checked);
    $("textarea").prop('required',true);

  });

回答3:

Can can do a check where it is selected or not. And make required true and false based on that check.

Try This JSFIFFLE

    $('input[name="messagetick"]').click(function() {
     $('#motif-reject').toggle(this.checked);

 if ($("#messagetick2").is(":checked")) {
         $('#motif').prop('disabled', 'disabled');
     $('#motif').prop('required', '');
    }else{
        $('#motif').prop('disabled', '');
      $('#motif').prop('required', 'required');
    }

});

来源：https://stackoverflow.com/questions/45961503/how-to-add-and-remove-a-required-attribute-with-a-toggle

标签

jquery

toggle