Question

我有4个复选框（已启用 - 已选中，已启用 - 未选中，已禁用 - 已选中，已禁用 - 未选中）。我已应用CSS将所有复选框转换为带有背景图像的div（带alpha的PNG）。我的意图是，禁用的复选框将具有灰色背景，以使图像看起来呈灰色。

这是我正在使用的JSFiddle链接。

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

除了两件事外，一切正常：

未禁用已禁用的复选框。我仍然可以点击它们并改变图像。
已启用已检查和已禁用已检查的Div在加载时未显示已选中的Tick图像。

我理解这种情况正在发生，因为在页面加载时我将所有复选框转换为div，而不管它们的Checked或Unchecked状态，但我该如何解决这个问题？

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

Answer 1

对于第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 + '" />');
});

Answer 2

在您的代码中添加以下 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/

Answer 3

这是一个纯粹的css＆amp; html解决方案也不需要图像..它需要一些视觉完美，但否则这就是你想要的。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以尝试以下代码。

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

需要根据CheckBox检查状态设置切换DiV的CssClass

4 个答案: