如何更改類名使用jquery

我有一個複選框，我想檢查和取消選中基於一個變量。波紋管是複選框的代碼。我正在使用Bootstrap複選框。如何更改類名使用jquery

<div class="row"> 
 
    <div class="col-sm-2"> 
 
    <label class="control-label" for="pwd">My Check-Box:</label> 
 
    </div> 
 
    <div class="col-sm-1"> 
 
    <span class="button-checkbox"> 
 
     <input type="checkbox" class="hidden" id="myCheckBox"/> 
 
     <button id="myCheckBoxButton" type="button" class="btn-chk" data-color="success" ></button> 
 
    </span> 
 
    </div> 
 
</div>

如果選中的複選框和unchecked，它看起來像波紋管

經過

未選中

我嘗試了多種方法來檢查並取消選中該複選框。這是什麼，我想

$('#myCheckBox').prop('checked',true); 
 
$('#myCheckBox').attr("disabled", false); 
 
$('#myCheckBox').attr("disabled", "true"); 
 

 

 
$('#myCheckBoxButton').prop('checked',true); 
 
$('#myCheckBoxButton').attr("disabled", false); 
 
$('#myCheckBoxButton').attr("disabled", "true");

沒有爲我工作。如果我使用普通複選框，它會起作用。

之後，我使用螢火蟲調試代碼。 這裏我看到代碼當checkBox被選中。

<input id="myCheckBox" class="hidden" type="checkbox" checked="checked"> 
 
<button id="myCheckBoxButton" class="btn-chk btn-success active" data-color="success" type="button"> 
 
<i class="state-icon glyphicon glyphicon-check"></i> 
 
</button>

現在我想這種情況。因爲複選框是一個按鈕，所以我想讓我們改變班級。

假設flag是一個變量，其中複選框選中取消選中。

if (flag == '0') { 
 
    $('#myCheckBox').attr('checked', false); 
 
    $("#myCheckBoxButton").addClass("btn-chk btn-default-chk"); 
 
} else { 
 
    $("#myCheckBoxButton").removeClass("btn-chk btn-default-chk"); 
 
    $("#myCheckBoxButton").removeClass("state-icon glyphicon glyphicon-unchecked"); 
 
    $("#myCheckBoxButton").addClass(" glyphicon glyphicon-check"); 
 
    $("#myCheckBoxButton").addClass("btn-chk btn-success active"); 
 
}

現在我可以檢查，但它看起來很奇怪。

當我使用fire bug進行調試時，我看到在代碼中發生了變化。

<input id="myCheckBox" class="hidden" type="checkbox"> 
 
<button id="myCheckBoxButton" class="glyphicon glyphicon-check btn-chk btn-success active" data-color="success" type="button"> 
 
<i class="state-icon glyphicon glyphicon-unchecked"></i> 
 
</button>

我可以清楚地看到有按鈕

<button id="myCheckBoxButton" class="glyphicon glyphicon-check btn-chk btn-success active" data-color="success" type="button">

添加一個額外的類如何解決這可以用這一個幫助。

來源

2016-02-16 Varun

看這裏。它工作正常。還是你在嘗試其他的東西？

var flag = 0; 
    if (flag == '0') { 
    $('#myCheckBox').prop('checked', true); 
    $("#myCheckBoxButton").addClass("btn-chk btn-default-chk"); 
} else { 
    $("#myCheckBoxButton").removeClass("btn-chk btn-default-chk"); 
    $("#myCheckBoxButton").removeClass("state-icon glyphicon glyphicon-unchecked"); 
    $("#myCheckBoxButton").addClass(" glyphicon glyphicon-check"); 
    $("#myCheckBoxButton").addClass("btn-chk btn-success active"); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="row"> 
    <div class="col-sm-2"> 
    <label class="control-label" for="pwd">My Check-Box:</label> 
    </div> 
    <div class="col-sm-1"> 
    <span class="button-checkbox"> 
     <input type="checkbox" class="hidden" id="myCheckBox" /> 
     <button id="myCheckBoxButton" type="button" class="btn-chk" data-color="success" ></button> 
    </span> 
    </div> 
</div>

正如你可以看到有，它工作正常，根據標誌變量，它被取消選中，並檢查。

來源

2016-02-16 10:25:46 amol01

可以更改班級名稱。請訪問此鏈接

http://api.jqueryui.com/switchclass/

來源

2016-02-16 11:04:57

如何更改類名使用jquery

回答

相關問題