如何根據複選框值設置標籤的樣式？

我正在嘗試爲表單打開/關閉按鈕。按鈕的樣式取決於複選框的值（選中/未選中），並且複選框本身被隱藏。我知道你可以使用CSS來管理風格（如標籤按鈕的顏色）。有什麼辦法可以改變父母的風格嗎？如何根據複選框值設置標籤的樣式？

HAML（ROR）：

%label.primary_btn 
    set as primary 
    = f.check_box :is_on, style: 'display:none;'

HTML：

<label class="primary_btn"> 
    On/Off Button 
     <input name="post[images_attributes][0][is_on]" type="hidden" value="0"><input id="post_images_attributes_0_is_on" style="display:none;" type="checkbox" value="1"> 
</label>

CSS：

.primary_btn { 
    float: left; 
    clear: both; 
    padding: 6px 10px; 
    border-top-left-radius: 9px; 
    border-top-right-radius: 9px; 
    border-bottom-right-radius: 9px; 
    border-bottom-left-radius: 9px; 
    color: white; 
    box-shadow: black 0px 1px 4px -1px; 
    cursor: pointer; 
    background-color: #6d6d6d; 
}

添加評論：我不能在標籤使用 '對'，因爲我不能調用嵌套字段:is_on的id。謝謝！

來源

2015-06-23 Quin

看看有什麼可以在這裏完成http://stackoverflow.com/questions/306635 62/use-images-like-checkboxes/ – jcuenod

感謝@ jcuenod，我無法使用該解決方案的原因是應用程序是在RoR中編寫的，我無法獲取nested_form庫以提供'for'設置標籤標籤.. – Quin

我很好奇爲什麼這不適合你：http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-label_tag – jcuenod

如果你改變你的HTML一點，這樣標籤是輸入的兄弟（和它之後），即：

<input type="checkbox" id="c1" /> 
<label for="c1">Some label</label>

很容易實現僅適用於CSS，如：

input[type=checkbox]:not(:checked) + label {color: gray} 
input[type=checkbox]:checked + label {color: blue}

來源

2015-06-23 13:21:01

輸入是標籤的子元素，所以不可能只用css選擇（css不能選擇父元素） – kapantzak

你說得對，爲什麼我建議**改變他的html **。這是一個選項，它會更容易，更加失敗。 –

謝謝@TomekSułkowski的答案！如果我不能在標籤中使用'for'怎麼辦？該應用程序在RoR中，我無法設置標籤的'for'屬性。對不起，我應該說得更清楚。 – Quin

檢查負載，每一次的複選框的變化：

var labelStyle = function(elem) { 
    var lb = elem.closest('label'); 
    if (elem.is(':checked')) { 
     lb.removeClass('label-unchecked').addClass('label-checked'); 
    } else { 
     lb.removeClass('label-checked').addClass('label-unchecked'); 
    } 
} 

$(window).load(function() { 
    labelStyle($('#post_images_attributes_0_is_on')); 
}); 

$('#post_images_attributes_0_is_on').on('change', function() { 
    labelStyle($(this)); 
});

來源

2015-06-23 13:22:51 kapantzak

您不會考慮在頁面呈現時設置複選框的可能性（通過後端） –

如何根據複選框值設置標籤的樣式？

回答

相關問題