1

チェックボックスとラジオボタンを画像に置き換える次のjQuery関数があります。htmldriveから取得したコードです。無効化された検出部分を除いて、すべてが機能しています。

アイデアは、1 つが排他的である 4 つのチェックボックスがあるということです。排他的なものをチェックすると、残りは無効になります。したがって、この無効なプロパティを無効なものから取得し、それぞれのラベルを「無効」なクラスで更新する必要があります。

ここでの入力はチェックボックスまたはラジオ ボタンのいずれかですが、ここでの主な焦点はチェックボックスです。

コメントされたコードは、入力が無効になっているかどうかを確認し、そのラベルをクラスで更新しようとしている場所ですが、機能していないようです。どんな助けでも大歓迎です。

更新 以下は私が完全に使用している機能です

jQuery.fn.customInput = function(){
 $(this).each(function(i){ 
  if($(this).is('[type=checkbox],[type=radio]')){
   var input = $(this);

   // get the associated label using the input's id
   var label = $('label[for='+input.attr('id')+']');

   //get type, for classname suffix 
   var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';

   // wrap the input + label in a div 
  $('<div class="custom-'+ inputType +'"></div>').insertBefore(input).append(input, label);

  // find all inputs in this set using the shared name attribute
  var allInputs = $('input[name='+input.attr('name')+']');
  input.attr('disabled', false);

  // necessary for browsers that don't support the :hover pseudo class on labels
  label.hover(
   function(){ 
   $(this).addClass('hover'); 
   if(inputType == 'checkbox' && input.is(':checked')){ 
    $(this).addClass('checkedHover'); 
   } 
  },
   function(){ $(this).removeClass('hover checkedHover'); }
 );

 //bind custom event, trigger it, bind click,focus,blur events     
 input.bind('updateState', function(){ 
   if (input.is(':checked')) {
    if (input.is(':radio')) {    
     allInputs.each(function(){
   $('label[for='+$(this).attr('id')+']').removeClass('checked');
  });  
 };
 label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }

/* if (input.is(':checkbox')  && input.prop('disabled'))
{
  label.addClass('disabled');
  label.removeClass('checked');
} */

})
 .trigger('updateState')
 .click(function(){ 
  $(this).trigger('updateState'); 
 })
 .focus(function(){ 
  label.addClass('focus'); 
  if(inputType == 'checkbox' && input.is(':checked')){ 
   $(this).addClass('checkedFocus'); 
  } 
 })
 .blur(function(){ label.removeClass('focus checkedFocus'); });
  }
 });
};

そして、次のようにインスタンス化します。

$(document).ready(function(){
    $('input').customInput();
});
4

2 に答える 2

1

使用している JQuery のバージョンによって、prop または attr を使用するかどうかが決まります。

あなたはこれを使うことができます

if(!$(this).prop('disabled'))

このフィドルをチェック

于 2012-09-03T07:40:48.363 に答える
0

試す ：

if (input.is(':checkbox')  && input.attr("disabled") )
{
 label.addClass('disabled');
 label.removeClass('checked');
}
于 2012-09-03T07:20:49.117 に答える