Semantic-ui：確定是否選中複選框

Question

我的代碼使用了semantic-ui複選框模塊。我有四個複選框。代碼需要確定何時所有chekboxes未被選中。

的HTML複選框之一：

<div class="inline field"> 
    <div class="ui toggle checkbox insurance"> 
    <input type="checkbox" name="insurance"> 
     <label>Would You Like To Reduce Your Monthly Insurance Costs</label> 
    </div> 
</div> 

的Javascript：

var $services = $('.service-selection').find('.ui.checkbox'), 
    $userData = $('.user-data'); 

function updateElements(elem, show) { 
    ... 

    // show second segment only when atleast one service checkbox is checked 
    if ($services.filter(":checked").size() > 0) { 
     $userData.removeClass('hidden'); 
    } 
    else { 
     $userData.addClass('hidden'); 
    } 

} 

$services.checkbox({ 
    'onEnable': function() {updateElements(this, true)}, 
    'onDisable': function() {updateElements(this, false)} 
}); 

原來，語義UI實際上並沒有設置相應的input元素的checked屬性。所以:checked選擇器失敗。

我的問題是如何做到這一點？

Answer 1

我認爲這個問題是服務選擇器（$services），您需要在輸入元素.ui.checkbox元素

var $services = $('.service-selection').find('.ui.checkbox input') 

也.size()不贊成使用.length

if ($services.filter(":checked").length > 0) { 
    $userData.removeClass('hidden'); 
} 
else { 
    $userData.addClass('hidden'); 
} 

Answer 2

一個最簡單的方法中爲了做到這一點。

讓我們想象一個複選框用於啓用或禁用文本字段。所以我們有：

# Using CoffeeScript: 
$("#signature_credit_with_coupon").on "change", -> 
    if (@checked) 
    $('#signature_coupon').attr 'disabled', false 
    $('#signature_coupon').focus() 
    else 
    $('#signature_coupon').attr 'disabled', true 
    return 

# Using JavaScript with jQuery: 
$("#signature_credit_with_coupon").on("change", function() { 
    if (this.checked) { 
    $('#signature_coupon').attr('disabled', false); 
    $('#signature_coupon').focus(); 
    } else { 
    $('#signature_coupon').attr('disabled', true); 
    } 
}); 

這工作正常。