如何使用切换添加和删除必需属性 [英] 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);
});

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

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

我不知道如何处理切换，你能帮帮我吗？

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

推荐答案

您可以使用与切换相同的布尔值textarea： this.checked 。然后将 required 属性设置为 motif select和 motif-text 像这样的textarea：

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

请尝试以下代码段：

$('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>

这篇关于如何使用切换添加和删除必需属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！