Question

OK, I have two HTML select elements and a button. I need to disable the button unless both of the selectors have any but default (na) values.

I’ve got this so far, but it doesn’t really work. What am I missing?

JS

function toggleBtn() {
    if($(".mySelect").val() == "na") {
        $(this).parents("td").find("input:button").attr("disabled", "disabled");    
    } else {
        $(this).parents("td").find("input:button").attr("disabled", "");    
    }
});

toggleBtn();

$(".mySelect").change(toggleBtn());

HTML

<table>
<tr>
  <td>
    <select class="mySelect">
      <option value="na"></option>
      <option value="1">value 1</option>
      <option value="2">value 2</option>
    </select> 

    <select class="mySelect">
      <option value="na"></option>
      <option value="3">value 3</option>
      <option value="4">value 4</option>
    </select> 
  </td>
</tr>
<tr>
  <td>
    <input type="button" value="click me">
  </td>
</tr>
</table>

Answer 1

Chris beat me to it darnit my version is this one

Loop through all your selects, if you find one that’s not ‘na’, disable your select button and stop the loop. You need to stop the loop or the last element basically dictates how your button behaves.

function toggleBtn() {
     var inputButton =  $('input[type="button"]').first();   
     inputButton.attr('disabled', null);
     $(".mySelect").each(function(index, element) {
        if ($(this).val() != 'na') {
            inputButton.attr('disabled', 'disabled');
            return false
            }
    });
 }
$(document).ready(function(e) {
    toggleBtn();
    $(".mySelect").change(toggleBtn);
    });

Plug that in to your script header and see what happens. This seems to work cross browser and we’re using attr…