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

enter image description here

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

修改

我已经调整了片段以适应演出中描述的目标。现在，在每次更改时，都会解析整个表。如果没有数百行，那就足够了。但它没有得到很好的优化。

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

必须删除已禁用的attr。即使它存在使它被禁用。我使用：https://api.jquery.com/removeAttr/

此外，如果取消选中该复选框，您的代码将不会再次添加禁用，也会澄清这是否是您问题的一部分。

如果选中复选框并选择选项，则启用jquery按钮

3 个答案: