Question

所以我确信使用JQuery有一种简单的方法可以做到这一点，但我对JQuery不太熟悉，所以我想我会问专家：）

所以我在我的JS中构建了一个大的HTML字符串，它通过.innerHtml（）插入，我将为你节省整个字符串，因为它对于这个问题并不重要，但我只是想知道如何进行简单的切换如果任何textarea文本中都有文本（每行有一个文本区域），则只显示我的SUBMIT按钮

所以我有我的表格：

    tableBody = "<form id='ssdSchedDR' name='ssdSchedDR' onsubmit='return emailSSD();'>";

我继续构建一个表并逐行输出，具体取决于我的查询应该构建的行数。

我的最后一栏是textarea：

    tableBody += "<td><div id='divEmailMsg"+i+"'><textarea id='EmailMsg"+i+"' name='EmailMsg' class='clsEmailMsg' onchange='chgEmailMsg("+i+");' rows='2' cols='50'>"
   + "</textarea></div>"
   + "<input type='checkbox'  name='emailType' value='sched' id='sched'><span class='checkboxtext'>Sched&nbsp;&nbsp;</span>"
   + "<input type='checkbox'  name='emailType' value='implant' id='implant'><span class='checkboxtext'>Implant</span>"
   + "</td>";

所以基本上，我只是希望SUBMIT按钮显示是否在任何EmailMsg [i]位置输入了文本，并且如果为所述textarea选择了一个复选框，还要（作为奖励）。如果有一种简单的方法可以告诉我。

Answer 1

几点，这里：

你应该在这里发布你尝试过的代码，如果不是，那你就冒了对你的OP进行downvote的风险
您不应在HTML中使用onchange或onsubmit，而应在单独的js文件中使用addEventListener（）或jQuery＃on（或至少<script>标记）
innerHTML不是函数，所以不能调用它，不要混淆domElement.innerHTML（属性与getter和setter）和jQueryElement.html（）（函数）。

请参阅jQuery API：hide和show以及on

Answer 2

的内容

$(document).on("change","textarea.clsEmailMsg",function(){
  var matches = $("textarea.clsEmailMsg").filter(function(){
    return ($(this).val().length && $(this).closest("td").find(":checkbox:checked").length)
  });
  if(matches.length)
    $(":submit").show();
  else
   $(":submit").hide();
});

$(document).on("change","textarea.clsEmailMsg, :checkbox",function(){
      var matches = $("textarea.clsEmailMsg").filter(function(){
        return ($(this).val().length && $(this).closest("td").find(":checkbox:checked").length)
      });
      if(matches.length)
        $(":submit").show();
      else
       $(":submit").hide();
    });

input[type='submit']{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
        <td>
            <div>
                <textarea id='EmailMsg"+i+"' name='EmailMsg' class='clsEmailMsg' rows='2' cols='50'></textarea>
            </div>
            <input type='checkbox' name='emailType' value='sched' id='sched' /><span class='checkboxtext'>Sched&nbsp;&nbsp;</span>

            <input type='checkbox' name='emailType' value='implant' id='implant' /><span class='checkboxtext'>Implant</span>

        </td>
    </tr>
    <tr>
        <td>
            <div>
                <textarea id='EmailMsg"+i+"' name='EmailMsg' class='clsEmailMsg' rows='2' cols='50'></textarea>
            </div>
            <input type='checkbox' name='emailType' value='sched' id='sched' /><span class='checkboxtext'>Sched&nbsp;&nbsp;</span>

            <input type='checkbox' name='emailType' value='implant' id='implant' /><span class='checkboxtext'>Implant</span>

        </td>
    </tr>
    </tbody>
</table>
<input type='submit' name='emailType' value='Submit' id='implant' /><span class='checkboxtext'></span>

Answer 3

在每个textarea的每个keydown上检查所有textareas以查看它们中是否有任何数据。如果有任何确实突破循环以检查并显示按钮，否则将其隐藏。

var $form = $('#ssdSchedDR'),
    $textareas = $form.find('textarea'),
    $submit = $form.find('input[type="submit"]');

$textareas.on('keydown', function(){
    var empty = true;

    $textareas.each(function(){
        if($(this).val() !== ''){
            empty = false;
            return false;
        }
    });

    if(!empty){
        $submit.show();
    }else{
        $submit.hide();
    }
});

由于在每个按键上循环遍历每个textarea可能会占用大量资源，因此您可能希望使用类似jQuery throttle / debounce

的内容来限制事件。

如果textarea中没有文本，则动态隐藏表单提交按钮

3 个答案: