Question

I have form markup like…

<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>

I’m trying to write a routine that filters out (disables) any select inputs where the value is blank so it doesn’t get sent to the backend that I don’t have control. Here is what I came up with based on answers to other questions I found here.

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

The second line of the submit function is not working though. I’ve tried several combinations and can’t figure out how to achieve this. Could anyone enlighten me as to what I’m doing wrong?

Answer 1

You can try this

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

OR

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

FULL CODE

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

    jQuery("#cart").submit();
});​

Check Fiddle

Another One