如何使用 Toggle 添加和删除必需的属性答案

【问题标题】：How to add and remove a required attribute with a Toggle如何使用 Toggle 添加和删除必需的属性
【发布时间】：2017-08-30 23:08:08
【问题描述】：

我的用户可以访问表单。

为了简化任务，我放了一个可选列表，但如果答案不在列表中，他们可以手动添加原因

可选列表默认为必填项但如果用户访问该文本字段，则它成为必需的，并且不再需要该列表（反之亦然）。

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);
});

你可以看到 JsFiddle： https://jsfiddle.net/rkkdhant/

我不知道如何使用切换，你能帮我吗？

【问题讨论】：

标签： jquery toggle

【解决方案1】：

您可以使用与 toggle 文本区域相同的布尔值：this.checked。然后将required 属性设置为您的motif select 和motif-text textarea，如下所示：

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

请尝试以下sn-p：

$('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 可以检查它在哪里被选中。并根据该检查确定所需的真假。

试试这个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');
    }

});

【讨论】：