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

Disable check box if there is an img element

本文关键字：复选框 存在 img 元素 如果      更新时间：2023-09-26

如果有一个具有数据属性的img元素（在checkbox元素之前）并且没有选中复选框，我需要禁用复选框并在复选框文本中换行。

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

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

这样做：

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

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

我在下面添加了一个.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'
        }));
    }  
});

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

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

替换：

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

相关文章：