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

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

但我的代码似乎忽略了选择选项

没有。您的代码没有忽略 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

将return 1即使“选择一个”是选定的选项。

在我看来，您可以做的最好的事情是验证select 的值是!== ''，考虑到这是“选择一个”option 的值，这是您的“无效”选项。