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>

Answer 1

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

Answer 2

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

复选框选中了事件。

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

Answer 3

根据我的理解，你的要求是这样的。请检查 DEMO ，并告诉我您是否可以使用。

<强>描述

 $( "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然后我们允许提交from else我们不允许提交from并同时禁用提交按钮。

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>

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

禁用提交按钮

3 个答案: