Как изменить имя класса с помощью jquery

Question

У меня есть флажок, и я хочу проверить и снять отметку на основе переменной. Bellow - это код для флажка. Я использую флажок Bootstrap.

<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>

Когда флажок установлен и снят, он выглядит как ниже

Проверено

Неконтролируемый

Я попробовал несколько способов проверить и снять флажок. это то, что я пытался

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

 

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

Ничто работает для меня. Он работает, если я использую нормальный флажок.

После этого я отлаживаю код с помощью firebug. Здесь я вижу код Когда 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>

Теперь я попытался это. потому что check-box - это кнопка, поэтому я подумал, что позволяет изменить класс.

Предположим, что флаг - это переменная, в которой установлен флажок check and uncheck.

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"); 
 
}

Теперь я могу проверить, но это выглядит странно.

Когда я отлаживаю использование пожарной ошибки, я видел, что это изменение в коде.

<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">

Как исправить это может один помочь с этим.

Answer 1

Посмотрите здесь. Он работает нормально. Или вы пытаетесь что-то еще?

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> 

Как вы можете видеть, он прекрасно работает на основе переменной флага, то отключив и проверки.

Answer 2

Изменить название класса. перейдите по этой ссылке

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