0
我試圖使用jquery/html/css來設置我的複選框和無線電輸入的樣式,但它不起作用。Jquery輸入複選框和收音機 - 不工作
收音機不工作。
我可以做些什麼改變才能使它工作?
非常感謝!
[我知道我可以用css3通過'+ label'來做到這一點,但由於某些原因無法解決。我喜歡這個jQuery的一個,因爲如果它是禁用它仍然有效perfecty上的瀏覽器]
這是代碼:
的(http://www.filamentgroup.com/examples/customInput/customInput.jquery.js)
jQuery.fn.customInput = function(){
$(this).each(function(i){
if($(this).is('input:checkbox,input:radio')){
var input = $(this);
// get the associated label using the input's id
var label = input.next();
// wrap the input + label in a div
var wrapper = $("<div/>");
if (input.is(':checkbox')) {
wrapper.addClass("custom-checkbox");
}
else {
wrapper.addClass("custom-radio");
}
wrapper.insertBefore(input).append(input, label);
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function(){
if (!this.disabled) {
$(this).addClass('hover');
}
},
function(){
$(this).removeClass('hover');
}
);
//bind custom event and trigger it, then bind click,focus,blur events
input.bind('updateState', function(){
label.toggleClass("disabled", input.is(":disabled"));
if (input.is(':checked')) {
if (input.is(':radio')) {
$('input[name='+input.attr('name')+']').each(function(){
$('label[for='+$(this).attr('id')+']').removeClass('checked');
});
}
label.addClass('checked');
}
else {
label.removeClass('checked');
}
})
.trigger('updateState')
.click(function(){
$(this).trigger('updateState');
})
.focus(function(){
label.addClass('focus');
})
.blur(function(){ label.removeClass('focus '); });
}
});
}修改;
演示 - >http://jsbin.com/uyateb/2/edit
對不起,你試圖做什麼,即風格如何? –
看起來很相似於我! – UweB
無線電輸入不起作用。 – Bruno