如何更改複選框標籤文本切換檢查引導樣式按鈕組

Question

我試圖更改bootstrap styled button group checkbox的標籤文本，但一旦更改，不可能再次更改文本。 （JSFiddle）

HTML：

<div class="btn-group form-group pull-right" data-toggle="buttons"> 
    <label id="lblfilter-green" for="filter-green" class="btn btn-success"> 
     <input type="checkbox" id="filter-green"/> 
     On 
    </label> 
</div> 

的Javascript：

$('#lblfilter-green').on('click', function (e) { 
    var value = $('#filter-green').is(':checked');     

    if (value) {  
     $('#lblfilter-green').text("Off"); 
    } else { 
     $('#lblfilter-green').text("On"); 
    } 
}); 

注 - 我只是在做綠色的，我不確定是否如果你使用的變化或點擊事件和重要按鈕爲例。

Answer 1

這是我對你的問題的解決方案：

我加了一個跨度爲文本內容，如：

<label id="lblfilter-green" class="btn btn-success"> 
     <input type="checkbox" id="filter-green" /><span>Off</span> 
    </label> 

然後我altert你jQuery來：

$('label').click(function() { 
     var checked = $('input', this).is(':checked'); 
     $('span', this).text(checked ? 'Off' : 'On'); 
    }); 

這提供了一個動態的方式來改變文字，你不必關心ID的

Full Sample

Answer 2

在經過大量調查並沒有提供任何有用的東西之後，我關閉了引導樣式並發現複選框元素在您更改文本後消失了 - 我猜想更改標籤文本會替換複選框元素（不確定是否這是一個錯誤或設計，但它有點混亂）。但我解決它通過添加複選框元素早在明確：（JSFiddle）

HTML：

<div class="btn-group form-group pull-right" data-toggle="buttons"> 
    <label id="lblfilter-green" for="filter-green" class="btn btn-success"> 
     <input type="checkbox" id="filter-green"> 
     On 
    </label> 
</div> 

的Javascript：

$('#lblfilter-green').on('click', function (e) { 
    var value = $('#filter-green').is(':checked');     

    if (value) {      
     $('#lblfilter-green').html("<input type='checkbox' id='filter-green' /> Off"); 
    } else { 
     $('#lblfilter-green').html("<input type='checkbox' id='filter-green' /> On"); 
    } 
}); 

注 - 這似乎並不重要，如果我集合中的元件上檢查明確（JSFiddle）：

$('#lblfilter-green').html("<input type='checkbox' id='filter-green' 'checked' /> On"); 

我不確定爲什麼，但假設bootstrap在這裏做一些事情，就像關閉bootstap一樣，它變得不可靠（並且只有在您點擊標籤而不是複選框時纔會起作用，因爲事件被掛鉤）。

Answer 3

HTML代碼 -

<div class="btn-group form-group" data-toggle="buttons"> 
    <label id="lblfilter-green" class="btn btn-success"> 
     <input type="checkbox" id="filter-green" />Off</label> 
    <label id="filter-amber" class="btn btn-warning"> 
     <input type="checkbox" id="filter-amber" />Off</label> 
    <label id="filter-red" class="btn btn-danger"> 
     <input type="checkbox" id="filter-red" />Off</label> 
</div> 

jQuery代碼 -

$(document).on('click', '#lblfilter-green', function (e) { 
     var value = $('#filter-green').is(':checked');     

     if (value ==false) {   
      $(this).html("<input type='checkbox' id='filter-green'>On"); 
     } else { 

      $(this).html("<input type='checkbox' id='filter-green'>Off"); 
     } 
    }); 

的jsfiddle - http://jsfiddle.net/Ashish_developer/yhdzuakb/

雖然我不知道你的代碼的HTML結構如下圖所示。

<label id="lblfilter-green" class="btn btn-success"> 
     <input type="checkbox" id="filter-green">Off</label> //Input close tag is not there. 

我保持您的代碼相同，並根據未選中/已選中的事件更改開啓/關閉文本。我認爲這是你的要求。