jquery button enable if checkbox and select option

Question

How do I enable the button if one or more checkbox is checked and if the select option of the checked checkbox is not equal to "no action"? Treating it as a row of table with checkbox being first element and select as last element?

This is how I am checking checkbox values.

<script>
  var checkboxes = $("input[type='checkbox']"),
      submitButt = $("input[type='submit']");


  submitButt.attr("disabled", "disabled");
  checkboxes.click(function() {
    submitButt.attr("disabled", !checkboxes.is(":checked"));
  });
</script>

//dynamically generating rows

for ws in my_zones:
   html_output += \
        ''''<tr><td><input type="checkbox" name="checkboxes" value="%s"/></td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>
            <select name="action">
                <option value='no action'>Choose Action</option>
                <option value='scan'>Reboot</option>
                <option value='swap'>Rebuild</option>
                <option value='terminate'>Terminate</option>

             </select></td></tr>''' \
        % (.......)

Answer 1

At each check state change, verify what you want: if there at least one checkbox checked and if the "no action" checkbox is not checked. Then you can enable the submit button, or otherwise disable it.

 function updateSubmitButtonState(){ var enableableLineCount= 0; $("tr").each(function(){ if( isEnableableLine( this ) ) enableableLineCount++; }); if( enableableLineCount > 0 ) $('[type="submit"]').removeAttr("disabled"); else $('[type="submit"]').attr("disabled","disabled"); function isEnableableLine( tr ){ if( $("input[type='checkbox']", tr).is(":checked") && $("select option[value='no-action']:selected", tr ).length == 0 ) return true; else return false; } } $("input[type='checkbox']").on("click",updateSubmitButtonState ); $("select").on("change",updateSubmitButtonState ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="checkbox" name="checkbox-group"> </td> <td> <select> <option value="option1">option 1 </option> <option value="option2">option 2 </option> <option value="no-action">no-action</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="checkbox-group"> </td> <td> <select> <option value="option1">option 1 </option> <option value="option2">option 2 </option> <option value="no-action">no-action</option> </select> </td> </tr> </table> <input type="submit" disabled="disabled" value="Submit" id="submit" /> 

edit

I have adapted the snippet to fit the goals described in coments. Now, at each change, the whole table is parsed. If there not hundred of line, it could be sufficient. But it is not very optimised.

Answer 2

https://jsfiddle.net/gzrv8v3q/13/

var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");


submitButt.attr("disabled", "disabled");


$('#form1').change(function() {
    var disable = true
    if ( $('#select').val() != "no-action") {
        checkboxes.each(function() {
            if ($(this).is(":checked")) {
                disable = false
            }
        })
    }
    submitButt.attr('disabled', disable);
})

Answer 3

The disabled attr must be deleted. Even it existing makes it disabled. I use: https://api.jquery.com/removeAttr/

Also, your code will not add disabled back again if the checkbox is unchecked, also clarify if that is part of your question.