验证文本框是否需要复选框

时间:2012-03-27 21:04:23

标签: jquery jquery-ui

我有一点问题,我正在搜索,但我找不到我需要的东西,我有3个复选框和一个表格中的文本框,我需要验证用户只能编辑文本框,如果他们alredy选中一个复选框,只能通过这种方式检查一个:

$("#tbCodCliente").validate({
                rules: {
                    checkbox: { 
                    required: 'input[type="checkbox"]:checked',
                    minlength: 1
                    }
                },
                messages: {
                    checkbox: "Please check at least one."
                }

tbCodCliente是表单

的文本框

或尝试

('#tbCodCliente').change(function() {
                if( $("input:checked").length == 0 ) {
            //
                    $("#request-form").validate({
                        rules: {
                            checkbox: { 
                                required: 'input[type="checkbox"]:checked',
                                minlength: 1
                                }   
                        },
                        messages: {
                            checkbox: "Please check at least one."
                        }
                    });        
            //        
                }
            });

这是我的复选框代码

<%= Html.CheckBox("cbCodigo") %> <label class="inline" for="Codigo">Codigo</label>
<%= Html.CheckBox("cbNombreCliente") %> <label class="inline" for="NombreCliente">Nombre del cliente</label>
<%= Html.CheckBox("cbCiudad") %> <label class="inline" for="Ciudad">Ciudad</label>

1 个答案:

答案 0 :(得分:1)

我会默认禁用文本框,然后在更改事件处理程序中启用它(并且一次只强制选中一个复选框)。

$(document).ready(function(){
    $('#tbCodCliente input[type="checkbox"]').change(function(e) {
        if( $("input:checked").length == 0 ) {
           $("#request-form").validate({
                rules: {
                    checkbox: { 
                        required: 'input[type="checkbox"]:checked',
                        minlength: 1
                    }   
                },
                messages: {
                    checkbox: "Please check at least one."
                }
            }); 
        }
        else{
            $("input[type='text']:disabled").removeAttr('disabled');
            $("input:checked").not($(e.target)).removeAttr('checked');

        }
    });
});

jsFiddle