javascript - jquery 按钮启用如果复选框和选择选项

Question

如果一个或多个复选框被选中并且选中的复选框的选择选项不等于“无操作”，我如何启用该按钮？将其视为一行表格，复选框为第一个元素，选择为最后一个元素？

这就是我检查复选框值的方式。

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


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

//动态生成行

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

在每次检查状态更改时，验证您想要的内容:是否至少选中了一个复选框，以及是否未选中“无操作”复选框。然后您可以启用提交按钮，或以其他方式禁用它。

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

编辑

我已经调整了代码片段以符合评论中描述的目标。现在，每次更改时，都会解析整个表。如果没有一百行，就足够了。但它不是很优化。