jQuery 如何在更改 textarea 时将“必需”属性添加到输入中?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26365911/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:15:24  来源:igfitidea点击:

How can I add the 'required' attribute to input on change of textarea?

jqueryhtmlformsattributesrequired

提问by MacTheSpiller

I need to add the required attribute to an html select (toDept) under the condition that a textarea (orderComments) has text typed in it. Below is my code... What am I missing? Do I need to run my jquery on a change event or something?

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

Thanks for your time!

谢谢你的时间!

回答by powerbuoy

You need to run the code when the textarea changes:

当 textarea 发生变化时,您需要运行代码:

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

回答by Joseph

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

You need to bind this to the event when the textarea changes

当 textarea 更改时,您需要将此绑定到事件

回答by Surreal Dreams

You'll want to check on the change event, or possibly others as well. Here I added your code into an .on() method so it runs after any change event. Then I invoke the change event to do it once on startup.

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

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

Click the run button to see it work. Keep in mind that once the required attribute is set, it is never unset. You would need to an an else clause and unset it if the value is blank.

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

回答by Jeromy French

You want to dynamically set the requiredproperty of the selectwhenever the textareais modified (via cut-and-paste, regular typing, deleting, etc):

您希望在修改时动态设置 的required属性(通过剪切和粘贴、常规键入、删除等):selecttextarea

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

To be explicit: if someone types something in the textarea, the selectbecomes required; if someone removes their text from the textarea, the select's requiredattribute is removed (the select is no longer required).

明确地说:如果有人在 中键入某些内容textarea,则select变为必需;如果有人从他们的删除文本textarea中,selectrequired属性被删除(选择不再需要)。

See this working example.

请参阅此工作示例