CODEWITHSUNDEEP
javascriptjquery
user3089927
user3089927

Reputation: 3905

jquery button enable if checkbox and select option

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>''' \
        % (.......)

enter image description here

Upvotes: 1

Views: 883

Answers (3)

Ga&#235;l Barbin
Ga&#235;l Barbin

Reputation: 3929

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.

Upvotes: 2

Said Kholov
Said Kholov

Reputation: 2486

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

Upvotes: 1

Ted Johnson
Ted Johnson

Reputation: 4343

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.

Upvotes: 0

Related Questions