需要設置CssClass切換基於CheckBox檢查狀態的DiVs

我有4個複選框（啓用 - 選中，啓用 - 未選中，禁用檢查，禁用 - 未選中）。我已經應用CSS將所有複選框轉換爲具有背景圖像的div（具有alpha的PNG）。我的意圖是，殘疾人複選框將有一個灰色的背景，使圖像看起來變灰。需要設置CssClass切換基於CheckBox檢查狀態的DiVs

這是我正在使用的JSFiddle鏈接。

http://jsfiddle.net/manasthemarvel/3uj7ogd0/2/

一切工作正常，除了兩件事情：

禁用的複選框未禁用。我仍然可以點擊它們並且圖像發生變化。
啓用檢查和禁用檢查的Div在加載時不顯示檢查的Tick圖像。

我明白這是發生，因爲在頁面加載，我將所有的複選框，div的，不論其登記或未登記的狀態，但我怎樣才能解決這個問題？

$('.input_class_checkbox').each(function(){ 
$(this).hide().after('<div class="class_checkbox"/>');  
});

來源

2015-05-25 BuggyCoder

http://codepen.io/CreativeJuiz/pen/BiHzp是否這樣？ –

根本不需要Javascript。 – connexo

對於點2，編輯後的腳本爲檢查狀態添加一個額外的類。 http://jsfiddle.net/afelixj/3uj7ogd0/4/

$('.input_class_checkbox').each(function(){ 
    var c = $(this).attr('disabled') ? '' : 'checked'; 
    $(this).hide().after('<div class="class_checkbox ' + c + '" />'); 
});

來源

2015-05-25 11:35:58

謝謝，但應檢查第1和第4複選框。小提琴有第三和第四次檢查： -/ – BuggyCoder

你是對的 - 更新小提琴。 - [http://jsfiddle.net/afelixj/3uj7ogd0/16/](http://jsfiddle.net/afelixj/3uj7ogd0/16/） –

現在禁用的郵箱已經可以再次點擊：'（：'（ – BuggyCoder

添加以下JS在你的代碼

$('.input_class_checkbox').each(function(){ 
    if($(this).is(":checked")){ 
     if($(this).is(":disabled")){ 
      $(this).hide().after('<div class="class_checkbox checked disabled"/>'); 
     } 
     else 
     { 
      $(this).hide().after('<div class="class_checkbox checked"/>');    
     } 
    } 
    else{ 
     if($(this).is(":disabled")){ 
      $(this).hide().after('<div class="class_checkbox disabled"/>'); 
     } 
     else 
     { 
      $(this).hide().after('<div class="class_checkbox"/>'); 
     } 
    } 
}); 

$('.class_checkbox').on('click',function(){ 
    if($(this).hasClass('disabled')){ 
     return false; 
    } 
    else 
    { 
     $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')); 
    } 
}); 

$("input:disabled").next().css("background-color", "gray");

見小提琴我已經修改http://jsfiddle.net/sachinkk/3uj7ogd0/12/

來源

2015-05-25 11:52:02 Sachink

這是一個純CSS & HTML的解決方案，也沒有需要圖像..它需要一些視覺完善，但否則這是你可能想要的。

http://jsfiddle.net/3uj7ogd0/15/

.input_class_checkbox { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    height: 20px; 
 
    position: relative; 
 
    width: 20px; 
 
} 
 
.input_class_checkbox + label:after { 
 
    box-sizing: border-box; 
 
    border: 2px solid #333; 
 
    border-radius: 3px; 
 
    content: " "; 
 
    display: block; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.input_class_checkbox:disabled + label:after { 
 
    background-color: #ccc; 
 
    border-color: #888; 
 
    color: #888; 
 
} 
 
.input_class_checkbox:checked + label:after { 
 
    content: "✓"; 
 
} 
 

 
.input_class_checkbox:checked + label + p { 
 
    font-weight: bold; 
 
}

<div> 
 
    <input type="checkbox" class="input_class_checkbox" disabled="disabled" checked="checked" id="a1" /> 
 
    <label for="a1"></label> 
 
    <p>Disabled checked</p> 
 
    <input type="checkbox" class="input_class_checkbox" disabled="disabled" id="a2" /> 
 
    <label for="a2"></label> 
 
    <p>Disabled Unchecked</p> 
 
    <input type="checkbox" class="input_class_checkbox" id="a3" /> 
 
    <label for="a3"></label> 
 
    <p>Active checkbox - Unchecked</p> 
 
    <input type="checkbox" class="input_class_checkbox" checked="checked" id="a4" /> 
 
    <label for="a4"></label> 
 
    <p>Active checkbox - Checked</p> 
 
</div>

來源

2015-05-25 11:52:50 connexo

你可以試試下面的代碼。

$('.class_checkbox').on('click',function(){ 
    if($(this).attr('disabled') == false){ 
     $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')); 
    } 
});

來源

2015-05-25 12:03:10

需要設置CssClass切換基於CheckBox檢查狀態的DiVs

回答

相關問題