1

data- 属性を持つ 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/で試してみました

上記で説明した目的の動作を追加するにはどうすればよいですか?

4

5 に答える 5

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 に答える
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

問題は、各画像を反復処理していないことです。代わりに、最初の画像でのみコードを実行しているだけです。

.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 に答える