1

如果有一个带有 data- 属性的 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/中尝试过

如何添加上面解释的所需行为？

4

5 回答 5

2

做这个：

$(".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(....

于 2013-07-29T13:16:56.607 回答
1

问题是您没有遍历每个图像，而是仅在第一个图像上运行代码。

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

小提琴

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'
        }));
    }  
});
于 2013-07-29T13:21:09.950 回答
1

我为此添加了标签和 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/

于 2013-07-29T13:22:04.903 回答
1 
$("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/

于 2013-07-29T13:31:12.657 回答
1

代替： 

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

于 2013-07-29T14:44:44.510 回答