jquery - 禁用提交按钮

Question

我有几个数组复选框，1个提交按钮和1个下拉菜单，当检查1个或许多复选框时，如何禁用/启用此提交按钮和下拉菜单。当此提交按钮被禁用并且用户单击它时，会出现对话框告诉未选中复选框

像这样的东西：http: //jsfiddle.net/frantic912/3YbZu/

setButton(buttonGroup) {
    var retArr = new Array();
    if (buttonGroup[0]) {
        for (var i = 0; i < buttonGroup.length; i++) {
            if (buttonGroup[i].checked) {
                document.frm_search.send.disabled = true;
                alert('Please check the first checkbox!');
            }
        }
    }
}


<form  method="post" name="frm_search">
    <table>
        <tr>  
            <td align="center">
                <input type="checkbox" name="appr[]" id="appr" value="<?php echo $row['userID']; ?>" onclick="setButton(this);"/>
            </td>
        </tr>
        <tr>
            <td>bla bla bla</td>
        </tr>
        <tr>
            <td>
                <select name="slct_appr" id="slct_appr" >
                    <option value="1">-- Please Choose --</option>
            <option value="2">Approve</option>
                    <option value="3">None</option>
                </select>
            </td>
      </tr>
      <tr>
          <td align="center">
              <input name="submit" class="submit" id="send" type="submit"  value="send" />
              <input name="txt_action" type="hidden" id="txt_action" value="frm_add_submit" />
          </td>
      </tr>
    </table>
 </form>

score 0 · Accepted Answer

尝试下面的代码来启用/禁用按钮和下拉菜单。

复选框选中事件。

<script> 
function apply(buttonGroup) 
{
    var retArr = new Array();

    if($("#appr:checked").length > 0)
    {
        $('#send').attr('disabled',true);
        $('#slct_appr').attr('disabled',true);
    }

    if($("#appr:checked").length == 0)
    {
        $('#send').attr('disabled',false);
        $('#slct_appr').attr('disabled',false);
    }
}
</script>

score 0 · Accepted Answer

这对于 jQuery 来说非常简单。我在整个代码中添加了不言自明的注释。

http://jsfiddle.net/Ljef5/

//monitor inputs of type checkbox for a change
$('input[type=checkbox]').change( function() {
    //how many checkboxes are now checked?
    var numChecked = $("input[type=checkbox]:checked").length;
    if (numChecked == 0) { 
        //disable the send button
        $('#send').prop('disabled', 'disabled'); 
    }
    else {
        //enable the send button
        $('#send').prop('disabled', ''); 
    }
});

//watch for when the form is submitted
$('form').submit(function() {
    var numChecked = $("input[type=checkbox]:checked").length;
    if (numChecked == 0) {
        //warn user that no checkboxes are checked
        alert('Tick a checkbox!');
        //prevent form submission
        return false;
    }
});

score 0 · Accepted Answer

据我了解，您的要求是这样的。请检查演示，让我知道它是否适合您。

描述

 $( "input[type=checkbox]" ).on( "click",function(){
    var n = $( "input:checked" ).length;
    if(n > 0){
        $("#send, #slct_lulus").attr("disabled",false)
        return true;
        $("#frm_submit").submit();
    }
    else{
        alert('Please Tick a checkbox!');
        //prevent form submission
        $("#send, #slct_lulus").attr("disabled",true)

    }
});

在上面的代码中，每次点击我都会检查复选框的长度，如果它大于 0，那么我们允许提交来自，否则我们不允许提交来自并同时禁用提交按钮。

HTML标记几乎没有变化，就像这样

<td><select name="slct_lulus" id="slct_lulus" disabled=true>
                <option value="1">-- Please Choose --</option>
                <option value="2">Approve</option>
                <option value="3">None</option>
                </select></td>
    <td><input name="submit" id="send" type="submit" disabled=true  value="Send" /></td>

在页面加载时，我禁用了初始页面提交的选择框和按钮。

jquery - 禁用提交按钮

3 回答 3

Related

Reference