如何过滤一个表单提交任何选择字段的提交，其中选择了空白或没有值的选项

Question

我的表格标记如...

<form id='cart' action="/cart/add" method="post">
    <div id="product-variants">
        <div class="selector-wrapper clearfix">
        <select class="product-select" name='id[]'>
            <option value="">&nbsp;---</option>
            <option value="a">Option A</option>
            <option value="b">Option B</option>
            <option value="c">Option C</option>
        </select>
        <select class="product-select" name='id[]'>
            <option value="">&nbsp;---</option>
            <option value="a">Option A</option>
            <option value="b">Option B</option>
            <option value="c">Option C</option>
        </select>
        </div>
    </div>
</form>

我正在尝试编写一个例程，该例程过滤（禁用）值为空白的任何选择输入，以免将其发送到我无法控制的后端。这是我根据我在这里发现的其他问题的答案所提出的。

jQuery(function(){
  jQuery("#cart").submit(function(){
    $(this).children(':input[value=""]').attr("disabled", "disabled");
    $(this).children('select option[value=""]').parent().attr("disabled","disabled");
    return true; // ensure form still submits
  });
});

提交功能的第二行不起作用。我尝试了几种组合，无法弄清楚如何实现这一目标。谁能启发我对我做错了什么？

Answer 1

您可以尝试此

$(this).find('select').filter(function() {
      return this.value === ''
 }).prop("disabled", true);

或

$(this).find('select').each(function() {
     if (this.value == '') {
        $(this).prop("disabled", true);
     }
});

完整代码

jQuery(function() {
    jQuery("#cart").submit(function(e) {
       // e.preventDefault();
        $(this).find('select').each(function() {
            if (this.value == '') {
                $(this).prop("disabled", true);
            }
        });
    });
    jQuery("#cart").submit();
});​

检查小提琴

另一个

Answer 2

jQuery("#cart").submit(function(e) {
  jQuery(this).find(':input').prop('disabled',function(){/* ':input will find select and input tags*/
        return $(this).val() =='';
   });
});

在提交处理程序中返回true是多余的。初始代码的另一个问题是select，input元素不是表格的孩子。children是直接后代