如果条件满足要求，JS启用禁用按钮

Posted 2023-05-08

【中文标题】如果条件满足要求，JS启用禁用按钮

【英文标题】：JS enable disabled button if the conditions meet the requirements

【发布时间】：2021-09-11 16:14:29

【问题描述】：

我想制作一个脚本来检查 textarea 中是否有超过 10 个字符，以及自定义下拉菜单的 textContent 是否不等于 Choose one。如您所见，它正在工作，但在您从菜单中选择一个选项后，Post 按钮仍处于禁用状态，只有在您在文本区域中写信时才会启用。有什么方法可以在用户选择一个选项后立即启用Post按钮？

代码：

var options = document.getElementById('option-selected-choose-one'); // This is the custom select box
$(document).ready(function()
    $('#cpmsbtndbld').attr('disabled',true); // This is the submit button
    $('#post_input_textarea').keyup(function()
        if(options.textContent != 'Choose one' && $(this).val().length > 10)  // If the select tag's value is not `Choose one` and the textarea has more characters than 10
            $('#cpmsbtndbld').attr('disabled', false); // Enable the submit button
         else 
            $('#cpmsbtndbld').attr('disabled',true); // Stay disabled
        
    )
);

【问题讨论】：

UM，运行select的onchange逻辑......

我已经尝试过了，但没有任何反应。

如果你打算重用相同的代码，你不能使用$(this).val().length。

【参考方案1】：

目前该功能仅在 textarea 上的 keyup 事件时触发。

也将其添加到下拉列表中：

$("#drop").change(function ()    
        //logic
    );

【参考方案2】：

与@Amith 的回答有关，我重用它并制作了一个新功能，现在它看起来像这样，并且可以正常工作：

var options = document.getElementById('option-selected-choose-one'); // This is the custom select box
function checkConstraints()
  if(options.textContent != 'Choose one' && $(this).val().length > 10)  // If the select tag's value is not `Choose one` and the textarea has more characters than 10
    $('#cpmsbtndbld').attr('disabled', false); // Enable the submit button
   else 
    $('#cpmsbtndbld').attr('disabled',true); // Stay disabled
  

function enableSub()
    if(options.textContent != 'Choose one')  // If the select tag's value is not `Choose one` and the textarea has more characters than 10
      $('#cpmsbtndbld').attr('disabled', false); // Enable the submit button
     else 
      $('#cpmsbtndbld').attr('disabled',true); // Stay disabled
    
  
$(document).ready(function()
  $('#cpmsbtndbld').attr('disabled',true); // This is the submit button
  $("#option-selected-choose-one").change(enableSub);
  $(".drop_elem").click(enableSub);
  $('#post_input_textarea').keyup(checkConstraints);
);

【参考方案3】：

您可以检查您的约束以启用发布按钮，无论是选择还是在文本区域输入。

var options = document.getElementById('option-selected-choose-one'); // This is the custom select box

function checkConstraints()
  if(options.textContent != 'Choose one' && $('#post_input_textarea').val().length > 10)  // If the select tag's value is not `Choose one` and the textarea has more characters than 10
    $('#cpmsbtndbld').attr('disabled', false); // Enable the submit button
   else 
    $('#cpmsbtndbld').attr('disabled',true); // Stay disabled
  


$(document).ready(function()
  $('#cpmsbtndbld').attr('disabled',true); // This is the submit button
  $("#option-selected-choose-one").on("change", checkConstraints);
  $('#post_input_textarea').keyup(checkConstraints);
);

【讨论】：

@epascarello 这确实行不通，但它帮了我很多，所以我可以用它来解决我的问题。

@epascarello 我没有看到函数中有this。解决了这个问题。