如果存在img元素，則禁用複選框

如果存在帶data屬性的img元素（複選框元素之前）且未選中複選框，則需要禁用複選框並複選複選框文本。如果存在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/

如何添加所需的行爲上面解釋？

來源

2013-07-29 Joshua

嘗試'（img.next（「複選框」）'代替。 – PiLHA

的問題是你是不是遍歷每個圖像，而不是你只是只對第一個圖像運行代碼選擇。

我在集合添加了.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' 
     })); 
    } 
});

來源

2013-07-29 13:21:09 MrCode

這樣做：

$(".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-29 13:16:56 smerny

我需要這樣做，如果複選框沒有選中... – Joshua

更新的.. .. – smerny

我添加標籤和這個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-29 13:22:04 tymeJV

$("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-29 13:31:12 undefined

替換：

<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

來源

2013-07-29 14:44:44

如果存在img元素，則禁用複選框

回答

相關問題