jQueryUI的Buttonset CSS問題

我有一組，我有Buttonset使用複選框以使它們看起來像按鈕jQueryUI的Buttonset CSS問題

<div id="ButtonList"> 

    <input type="checkbox" id='Check0' value="true" /><label for="Check0">0000</label> 
    <input type="checkbox" id='check1' value='false' /><label for="check1">0100</label> 
    <input type="checkbox" id='check2' value='true' /><label for="check2">0200</label> 
    <input type="checkbox" id='check3' value='false' /><label for="check3">0300</label> 

</div>

而且

$('#ButtonList').buttonset(); 

$('#ButtonList input[type=checkbox]').change(function() { 
    $(this).css("color", "red"); 
});

我想的是，當用戶點擊該按鈕使按鈕下方的複選框發生變化，在這種情況下顏色將變爲紅色。

我一直在努力幾個小時，沒有運氣，谷歌也沒有什麼幫助。

感謝

來源

2013-02-20 Clifford Agius

你們是不是要改變按鈕的樣式，或者由按鈕隱藏的複選框的風格？您當前的代碼是將紅色的**文本**顏色添加到隱藏的複選框元素。 – 2013-02-20 22:40:28

更改按鈕的樣式。 – 2013-02-20 23:12:49

您當前的代碼被添加的紅色文字顏色爲隱藏複選框元素，而不是風格的jQuery UI的buttonset。

只需使用CSS就可以覆蓋列表中活動按鈕的jQuery UI的默認樣式。

$('#ButtonList').buttonset();

CSS

#ButtonList .ui-button.ui-state-active .ui-button-text { 
    color: red; 
    background-color: pink; 
}

jsfiddle

更新：

根據您的意見，您聽起來像是想用.each()來迭代項目而不是使用CSS。您可以通過選擇正確的項目並調整JS中的樣式來實現。

$('#ButtonList input[type=checkbox]').change(function() { 
    var jquiButtonLabel = $(this).next('.ui-button'); 
    var jquiButtonText = jquiButtonLabel.children('.ui-button-text'); 
    if (jquiButtonLabel.hasClass('ui-state-active')) { 
     jquiButtonText.css({ 
      'color': 'red', 
      'background-color': 'pink' 
     }); 
    } else { 
     jquiButtonText.css({ 
      'color': '', 
      'background-color': '' 
     }); 
    } 
});

jsfiddle

來源

2013-02-20 22:47:18

謝謝，現在有道理，是的，我知道我可以添加它與CSS，但我想控制按鈕的其他元素添加到組中的每個按鈕，所以CSS不是一個選項。 – 2013-02-20 23:01:06

出於興趣有沒有一種方法來控制沒有CSS樣式的CSS或按鈕組，所以我在嘗試，但沒有CSS像你的jsfiddle？ – 2013-02-20 23:02:00

@CliffordAgius我根據您的意見添加了一個替代解決方案。 – 2013-02-20 23:27:44

jQueryUI的Buttonset CSS問題

回答

相關問題