Question

如果有一个img元素（在复选框元素之前）并且没有选中复选框，我需要禁用复选框并在复选框文本中划线。

<div class="classContainer">  
    <label>
        <img data-disable-checkbox="true">
        <input type="checkbox" checked="checked" />
            This checkbox value
    </label>
    <label>        
        <input type="checkbox" />
       This checkbox value
    </label>
    <label>
        <img data-disable-checkbox="true">
        <input type="checkbox" />
        This checkbox value
    </label>
</div>  



var img = $("img[data-disable-checkbox='true']");
        if (!(img.next("input").is(":checked"))){            
            img.next().prop("disabled", true);
            img.parent().contents().filter(function(){
                return this.nodeType == 3 && $.trim($(this).text());
            }).wrap($('<span />', {
                style: 'text-decoration: line-through'
            }));
        }

我在http://jsfiddle.net/yXVZM/9/

中尝试过

如何添加上述所需的行为？

Answer 1

这样做：

$(".test").each( function() {
    $this = $(this);
    if($this.find("img").length) {
        $this.find("input:checked").prop("disabled", "true");
    }
});

演示：http://jsfiddle.net/yXVZM/14/

编辑：显然我误读并且考虑过检查而不是不检查并且没有抓住罢工 - 为此：

http://jsfiddle.net/yXVZM/19/

$(".test").each( function() {
    $this = $(this);
    if($this.find("img").length) {
        $notChecked = $this.find("input:checkbox").not(":checked");
        if($notChecked.length) {
            $notChecked.prop("disabled", "true");
            $this.attr("style","text-decoration: line-through");
        }
    }
});

这是基于你的小提琴中的每个标签都有这个类的事实。如果你的代码中没有类，你可以做类似的事情......或者只是添加一个类。

或者使用像这样的选择器$(".classContainer").children().each(....

Answer 2

问题是你没有迭代每个图像，而只是在第一个图像上运行代码。

我在下面添加了一个.each()来遍历集合中的每个图片：

Fiddle

var img = $("img[data-disable-checkbox='true']");
img.each(function(index, val){
    if (!($(this).next("input").is(":checked"))){   
        $(this).next().prop("disabled", true);
        $(this).parent().contents().filter(function(){
            return this.nodeType == 3 && $.trim($(this).text());
        }).wrap($('<span />', {
            style: 'text-decoration: line-through'
        }));
    }  
});

Answer 3

我为此添加了标签和CSS类，如何：

JS：

$("input[type='checkbox']").each(function() {
    var image = $(this).prev("img[data-disable-checkbox]").length;
    var isChecked = this.checked;

    if (image && !isChecked) {
        $(this).prop("disabled", true);
        $(this).next("label").addClass("cbDisabled");
    }
});

CSS：

.cbDisabled {
    text-decoration:line-through;
}

演示：http://jsfiddle.net/yXVZM/16/

Answer 4

$("img[data-disable-checkbox='true']").each(function() {
    var n = $(this).next('input[type=checkbox]').not(':checked').prop('disabled', true).prop('nextSibling');
    $(n).wrap('<span class="strike"/>');
});

http://jsfiddle.net/gwJYN/

Answer 5

替换：

<label>
    <img data-disable-checkbox="true">
    <input type="checkbox" />
    This checkbox value
</label>

致：

<label class="test">
    <img data-disable-checkbox="true">
    <input type="checkbox" class="chk" /> <span>
            This checkbox value        
        </span>
</label>

JS：

$(document).ready(function () {
    $('.test').each(function () {
        if ($(this).find('img').length > 0) {
            if ($(this).find('.chk').not(":checked")) {
                $(this).find('.chk').prop("disabled", true);
                $(this).find('.chk').next('span').css('text-decoration', 'line-through');
            }
        }
    });
});

JSFIDDLE DEMO

如果有img元素，请禁用复选框

5 个答案: