时间戳

首页 > 解决方案 > 检查 2 个输入和启用按钮的变化

javascript - 检查 2 个输入和启用按钮的变化

问题描述

我有一个包含一系列无线电项目的表格。如果用户在其中一个单选项目（缺少项目）上选择特定条目，我使用 JQuery 将引导程序 is-invalid 类添加到表单上的两个特定输入以及一个标签，要求他们添加详细信息并禁用提交按钮阻止他们提交表单。

$(function () {
$("input[name=optradio]:radio").click(function () {
  if ($('input[name=optradio]:checked').val() == "2") {
      $('textarea[name=sentTo]').addClass('is-invalid');
      $('input[name=dateSent]').addClass('is-invalid');
      $('#removedMSG').text("You must update this field prior to saving");
      $('#removedMSG2').text("You must update this field prior to saving");
      $('#submit').prop('disabled', true);
  } else {
      $('textarea[name=sentTo]').removeClass('is-invalid');
      $('input[name=dateSent]').removeClass('is-invalid');
      $('#submit').prop('disabled', false);
  }
});
});

我想添加进一步的检查以确保用户在重新启用提交按钮之前更新了两个输入（一个文本区域）。

我知道我可以使用以下内容检查输入更改

$("textarea[name=sentTo]").on("input", function(){
   $('textarea[name=sentTo]').removeClass('is-invalid');
});

这工作正常。但是我不知道如何将它们整合在一起：

所以基本上用户选择了收音机，is-invalid 被添加到 2 个输入字段并且提交按钮被禁用 - 用户根据需要完成 2 个字段，只有当两个字段都更新后，我们才会重新启用提交按钮。

我在想我需要一个 if 语句，但我似乎无法正确编写代码。

我试过了

if `$("textarea[name=sentTo]").on("input") && $("textarea[name=dateSent]").on("input")`

但这不起作用

感谢妈妈，我正在使用下面的代码。

$(function () {
$('input[name=optradio]:radio').click(function () {
  if ($('input[name=optradio]:checked').val() == "2") {
      $('textarea[name=sentTo]').addClass('is-invalid');
      $('input[name=dateSent]').addClass('is-invalid');
      $('#removedMSG').text("You must update this field prior to saving");
      $('#removedMSG2').text("You must update this field prior to saving");
      $('#submit').prop('disabled', true);
      $('#submit').addClass('btn-danger');
      $('#submit').removeClass('btn-primary');
  } else {
      $('textarea[name=sentTo]').removeClass('is-invalid');
      $('input[name=dateSent]').removeClass('is-invalid');
      $('#submit').prop('disabled', false);
      $('#submit').addClass('btn-primary');
      $('#submit').removeClass('btn-danger');
  }
 });
});

var sentTo = false;
var dateSent = false;
$("textarea[name=sentTo], input[name=dateSent]").on("input", function(){
if($(this).attr('name') == 'sentTo') {
  sentTo = true;
  $(this).removeClass('is-invalid');
}
if($(this).attr('name') == 'dateSent') {
  dateSent = true;
  $(this).removeClass('is-invalid');
}
if(sentTo && dateSent){
  $('#submit').prop('disabled', false);
  $('#submit').addClass('btn-primary');
  $('#submit').removeClass('btn-danger');
}
});

标签： javascriptjqueryhtml

解决方案

您可以传递多个以逗号分隔的选择器，并使用this关键字来引用事件处理函数中的当前元素：

var sentTo = dateSent = false;
$("textarea[name=sentTo], textarea[name=dateSent]").on("input", function(){
  if($(this).attr('name') == 'sentTo') sentTo = true;    //true for sentTo
  if($(this).attr('name') == 'dateSent') dateSent = true;//true for dateSent
  if(sentTo && dateSent){  // if both are true
    $(this).removeClass('is-invalid');
    sentTo = dateSent = false;
  }
});

推荐阅读