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

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

html:

但是，如果我将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;
}

---

保罗·鲁布也许是对的，但有另一种方法可以解决这个问题。设置显示：none可以让您随心所欲地设置单选按钮的样式，但这意味着屏幕阅读器永远不会知道该单选按钮，您是对的，验证器也不会知道该按钮

您可以使用一种不同的CSS技术隐藏单选按钮，同时使其仍能与屏幕阅读器和jQuery验证器一起工作

尝试使用这些样式隐藏单选按钮，而不是显示：无：

此修复背后的想法是使用clip方法来屏蔽此元素，而不影响周围任何其他元素的位置。这主要是借用自

---

希望这有帮助。

您的副本可能是正确的。太快了。非常感谢你。我没有想到要查看与display的链接：none元素。

$(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;
        }
    });

});

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

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