2013-07-27 81 views
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

+0

對不起,你試圖做什麼,即風格如何? –

+0

看起來很相似於我! – UweB

+0

無線電輸入不起作用。 – Bruno

回答

0

經常檢查你的瀏覽器的JavaScript控制檯。這是你的朋友。

在您的例子我看到一個錯誤,告訴我

Uncaught Error: Syntax error, unrecognized expression: [name=option[218]] 

由這種表達

$('input[name='+input.attr('name')+']') 

如果名稱值是一個簡單的名稱不同引起的(在你的情況下,它是option[218] ),那麼你必須在值的周圍使用額外的引號。因此,將您的代碼更改爲

$('input[name="'+input.attr('name')+'"]') 

並且錯誤消失。

相關問題