Question

我有一个单选按钮并添加了jQuery验证以确保选中此单选按钮。这很好。

HTML：

<form id="myform">
    <input type="radio" id="c1" name="cc" />
    <label for="c1"><span></span>Check Box 1</label>
    <input type="submit" />
</form>

的javascript：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            'cc': {
                required: true
            }
        },
        messages: {
            'cc': {
                required: "You must check this"
            }
        },
        submitHandler: function (form) {
            alert('valid form submitted');
            return false;
        }
    });

});

但是，如果我添加css来设置单选按钮的样式，则验证将不再起作用。我想这是因为没有显示radiobutton，因此从中删除了验证。问题当然是，我该如何解决这个问题？

input[type="radio"] {
    display:none;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -38px top no-repeat;
    cursor:pointer;
}
input[type="radio"]:checked + label span {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -57px top no-repeat;
}

Answer 1

Paul Roub可能是对的，但还有另一种方法。设置display: none可以让你随心所欲地设置单选按钮的样式，但这意味着屏幕阅读器永远不会知道该单选按钮，你是对的，验证器也不知道按钮。

您可以使用不同的CSS技术隐藏单选按钮，同时仍然可以使用屏幕阅读器和jQuery验证器。

尝试使用这些样式隐藏单选按钮（而不是display: none）：

input[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: [height of element]
    margin: 0 [negative width of element] [negative height of element] 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: [width of element];
    opacity: 0.001;
}

此修复背后的想法是使用clip()方法来屏蔽此元素，而不会影响其他任何内容的位置。这主要是从jQuery UI

借来的

希望这有帮助。

css样式单选按钮干扰jquery验证

1 个答案: