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

enter image description here

Do you mean custom select attribute?

Said Kholov
– Said Kholov

2015-04-19 01:35:08 +00:00
Commented Apr 19, 2015 at 1:35 — Said Kholov
– Said Kholov, Commented Apr 19, 2015 at 1:35
i meant select tag in html.

user3089927
– user3089927

2015-04-19 01:39:48 +00:00
Commented Apr 19, 2015 at 1:39 — user3089927
– user3089927, Commented Apr 19, 2015 at 1:39
I posted a possible solution, is that what you wanted?

Said Kholov
– Said Kholov

2015-04-19 02:04:05 +00:00
Commented Apr 19, 2015 at 2:04 — Said Kholov
– Said Kholov, Commented Apr 19, 2015 at 2:04

Gaël Barbin · Accepted Answer · 2015-04-19 02:36:54Z

2

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.

edited Apr 19, 2015 at 2:36

answered Apr 19, 2015 at 1:35

Gaël Barbin

3,9353 gold badges31 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

user3089927 Over a year ago

thanks for the answer but last element is a select option not a checkbox. how to manage that?

user3089927 Over a year ago

i have updated my question with the snapshot and also with the structure of html. Since I am dynamically generating rows of the table, I am not thinking of using "id". Can we play without the "id"?

Gaël Barbin Over a year ago

I tried to fit your example, but note that providing code may be more efficient.

Gaël Barbin Over a year ago

As I understand, if there just one select which has an "no action" value, the submit button is disabled, is that right?

Gaël Barbin Over a year ago

Because, you may be want that it is only if the select value of the checked line have a "no action" value which disable the submit button.

|

Said Kholov · Accepted Answer · 2015-04-19 01:48:14Z

1

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

edited Apr 19, 2015 at 1:48

answered Apr 19, 2015 at 1:38

Said Kholov

2,4961 gold badge18 silver badges22 bronze badges

2 Comments

Said Kholov Over a year ago

if you have only one checkbox don't use each function

user3089927 Over a year ago

each row will have on checkbox..i have uploaded an image for more clarity.

Ted Johnson · Accepted Answer · 2015-04-19 01:23:31Z

0

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.

answered Apr 19, 2015 at 1:23

Ted Johnson

4,3733 gold badges32 silver badges31 bronze badges

2 Comments

user3089927 Over a year ago

but i checked, checking and unchecking checkboxes and it is working fine..but then how to "&&" "no action" select option with this.. just started with jquery.

Ted Johnson Over a year ago

That was the start of your question.

Collectives™ on Stack Overflow

jquery button enable if checkbox and select option

3 Answers 3

10 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related