如何在文本区域更改时添加“必需”属性来输入？答案

【问题标题】：How can I add the 'required' attribute to input on change of textarea?如何在文本区域更改时添加“必需”属性来输入？
【发布时间】：2014-10-14 16:40:14
【问题描述】：

我需要在 textarea (orderComments) 中输入文本的条件下将 required 属性添加到 html select (toDept)。下面是我的代码......我错过了什么？我需要在更改事件上运行我的 jquery 吗？

    $(document).ready(function() {
          if ($('#textareaId').val() != '') {
            $("#selectId").attr('required', true);
          }
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="textareaId"></textarea>

<select id="selectId">
  <option value=""></option>
  <option value="opt1">opt1</option>
</select>

感谢您的宝贵时间！

【问题讨论】：

此代码仅在页面加载时运行，不再运行。

标签： jquery html forms attributes required

【解决方案1】：

当文本区域发生变化时需要运行代码：

var textarea = $('#textareaId');
var select = $('#selectId');

var addOrRemoveRequiredAttribute = function () {
    if (textarea.val().length) {
        select.attr('required', true);
    }
    else {
        select.attr('required', false);
    }
};

// Run now
addOrRemoveRequiredAttribute();

// And when textarea changes
textarea.on('change', addOrRemoveRequiredAttribute);

【讨论】：

谢谢 - 我最终使用了这段代码。 attr() 将所需属性添加到 select 中，如下所示： required=""... 这对 IE 不起作用，您知道一种无需 ="" 即可简单设置所需属性的方法吗？
嗯，我不确定我是否在关注，但我想你可以试试select[0].required = true。

【解决方案2】：

$(document).ready(function(){
  $("#textareaId").on('change keyup paste', function() {
        $("#selectId").attr('required',true);
  });
});

当文本区域发生变化时，您需要将此绑定到事件

【讨论】：

您应该检查以确保 textarea 也输入了一些内容。

【解决方案3】：

您需要检查更改事件，或者可能还有其他事件。在这里，我将您的代码添加到 .on() 方法中，以便它在任何更改事件之后运行。然后我调用 change 事件在启动时执行一次。

    $(document).ready(function() {
        $('body').on('change', '#textareaId', function(){
          console.log("test");
          if ($(this).val() != '') {
            $("#selectId").attr('required', true);
          }
        });

        $('#textareaId').change();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="textareaId"></textarea>

<select id="selectId">
  <option value=""></option>
  <option value="opt1">opt1</option>
</select>

单击运行按钮查看它的工作情况。请记住，一旦设置了 required 属性，就永远不会取消设置。如果值为空白，您将需要一个 else 子句并取消设置它。

【讨论】：

【解决方案4】：

您希望在修改textarea 时（通过剪切和粘贴、常规输入、删除等）动态设置select 的required 属性：

$('#textareaId').on("input propertychange", function(){ $('#selectId').prop('required', $(this).val().length) });

明确地说：如果有人在textarea 中输入内容，则select 成为必填项；如果有人从textarea 中删除了他们的文本，则select 的required 属性将被删除（不再需要选择）。

见this working example。

【讨论】：