javascript - 如何让选择选项与禁用和启用提交按钮一起使用

Question

我有一个带有文本区域的表单，输入类型:文本、单选和复选框。它还具有选择选项并首先禁用提交按钮。

一个想法是，如果所有字段都已填写，则提交按钮将启用。

一切都按预期工作，但似乎我的代码忽略了选择选项。这意味着在我选择选项之前提交按钮已启用。

下面是我的选择选项代码:

var pickOne = $('#pickone option:selected').length === 0;
              if (pickOne) {
              console.log("pickOne: " + pickOne);
                  filled = false;
              } 

我想知道我是否错过了什么。请看一下我的样本 jsfiddle

HTML

<form action="" method="post" id="subnewtopicform" />Title:
<input type="text" name="title"> <br />
Name:
<input type="text" name="name">
<br/>Description:
<textarea name="description"></textarea>
<br/>Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
    <li id="category-19">
        <label class="selectit">
            <input type="radio" id="in-category-19" name="category" value="19">Animation</label>
    </li>
    <li id="category-20">
        <label class="selectit">
            <input type="radio" id="in-category-20" name="category" value="20">Anime</label>
    </li>
</ul>
    <div class="fieldText" id="multi-select">
      <lable>
        <input class="item" name="item1" type="checkbox">Item 1
      </lable>
      <lable>
        <input class="item" name="item2" type="checkbox">Item 2
      </lable>
    </div>
    <p>
         <select name="pickone" id= "pickone" required>
            <option selected="selected" value="">Select one</option>
            <option value="a">aktif</option>
            <option value="l">terkunci</option>
            <option value="b">blokir</option>
     </select>
    </p>
<input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" disabled="disabled" />
</form>

JS

//function check() {
$('#subnewtopicform').on("keyup change", function() {
    var inputs = $("input");
    var textareas = $("textarea");
    var filled = true;
    var oneChecked = false;
    var multiChecked = false;
    //var pickOne = $('#pickone option:selected').length === 0;
    //var pickOne = false;


    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === "text" && !inputs[i].value) {
            filled = false;
        }

        if (inputs[i].type === "radio" && inputs[i].checked) {
            oneChecked = true;
        }
        if (inputs[i].type === "checkbox" && inputs[i].checked) {
                multiChecked = true;
        }
    }

    if (!oneChecked) {
        filled = false;
    }
    if (!multiChecked) {
        filled = false;
    }
    var pickOne = $('#pickone option:selected').length === 0;
              if (pickOne) {
              console.log("pickOne: " + pickOne);
                  filled = false;
              }

    for (var j = 0; j < textareas.length; j++) {
        if (!textareas[j].value) {
            filled = false;
        }
    }

    if (filled) {
        $("#subnewtopic").removeAttr('disabled');
    } else {
        $("#subnewtopic").prop('disabled', 'disabled');
    }
}
)
/* window.addEventListener("keyup", check);
window.addEventListener("click", check); */

Answer 1

but it seems like my code ignores select option

没有。您的代码不会忽略 select 选项。

 <select name="pickone" id= "pickone" required>
        <option selected="selected" value="">Select one</option> //This is selected by default
        <option value="a">aktif</option>
        <option value="l">terkunci</option>
        <option value="b">blokir</option>
 </select>

“选择一个”是一个有效选项，并且默认情况下处于选中状态，因此以下代码:

$('#pickone option:selected').length

即使选择了“选择一个”选项，也会返回 1。

在我看来，你能做的最好的事情就是验证 select 的值是 !== '' 考虑到这是“Select one”的值 选项 这是您的“无效”选项。