JS在满足条件的情况下启用disabled按钮

Question

我想制作一个脚本来检查文本区域中是否有超过 10 个字符，以及自定义下拉菜单的 textContent 是否不等于 Choose one。如您所见，它可以正常工作，但是在您 select 从菜单中选择一个选项后， Post 按钮仍处于禁用状态，并且只有在您在文本区域中输入字母时才会启用。有什么方法可以在用户 select 编辑选项后立即启用 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
        }
    })
});

Answer 1

目前该函数仅在文本区域上的按键事件上触发。

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

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

Answer 2

您可以检查约束以启用 post 按钮，在文本区域中进行选择和输入时。

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

Answer 3

与@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);
});

JS在满足条件的情况下启用disabled按钮

JS enable disabled button if the conditions meet the requirements

html

javascript

jquery

textarea

drop-down-menu