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

【问题标题】：JS enable disabled button if the conditions meet the requirements如果条件满足要求，JS启用禁用按钮
【发布时间】：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。

标签： javascript html jquery drop-down-menu textarea

【解决方案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。解决了这个问题。