CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joshua
Joshua

Reputation: 2295

Disable check box if there is an img element

I Need to disable the checkbox and line through the checkbox text if there is an img element (before the checkbox element) with data- attribute and if checkbox not checked.

<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'
            }));
        }

I have tried it in http://jsfiddle.net/yXVZM/9/

How can I add the desired behavior explained above?

Upvotes: 1

Views: 324

Answers (5)

Dhaval Bharadva
Dhaval Bharadva

Reputation: 3083

Replace: 

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

To: 

<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

Upvotes: 1

Ram
Ram

Reputation: 144659

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

Upvotes: 1

Smern
Smern

Reputation: 19066

Do this:

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

Demo: http://jsfiddle.net/yXVZM/14/

Edit: apparently I misread and thought checked rather than not checked and didn't catch the strike-thru - for that:

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");
        }
    }
});

This was based on the fact you have the class for each label in your fiddle. You could do something similar if you don't have the class in your code... or just add a class.

Or use a selector like this instead $(".classContainer").children().each(....

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

I added labels and a CSS class for this, how about:

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

Demo: http://jsfiddle.net/yXVZM/16/

Upvotes: 1

MrCode
MrCode

Reputation: 64526

The problem is you aren't iterating over each images, instead you're just running the code only on the first image.

I've added an .each() below to loop through each image in the set:

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'
        }));
    }  
});

Upvotes: 1

Related Questions