Jquery 如何使用切换添加和删除所需的属性

我的用户可以访问表单

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

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

HTML:

您可以看到JSFIDLE：

---

我不知道如何使用开关，你能帮我吗

可以在选择与否的位置进行检查。并根据检查结果确定所需的正确和错误

试试这个

---

您可以使用与切换文本区域相同的布尔值：

this.checked

。然后将

required

属性设置为

motif

选择并

motif-text

text区域，如下所示：

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

请尝试以下代码段：

$（'input[name=“messagetick”]”）。单击（函数（）{
$（'#motif reject'）.toggle（this.checked）；
$（“textarea[name='motif-text']”）prop（“必需”，this.checked）；
$（“选择[name='motif']”）prop（“必需”、！this.checked）；
console.log（“复选框检查：+this.checked”）；
log（“Textarea required:+$”（“Textarea[name='motif-text']”）prop（“required”）；
console.log（“Select required:”+$（“Select[name='motif']））.prop（“required”）；
console.log（“---------------------------------------------”）；
});

挑选
1.
2.
3.
4.
5.
其他
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>

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

});

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

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

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

  });