CODEWITHSUNDEEP
jquery
user10932236
user10932236

Reputation:

How can i display button in two different colors on click the button

I need to display the button in white color for the first time and if user clicks on the button it should be turned to blue that means first buttonInactive style code class should be applied and if i click buttonActive I am enabling the prop to true in button click event but its not working

.buttonActive {
    background-color: #1E78AB;
    border: 1px solid #1E78AB;
    color: #fff;

}
.buttonInactive {
    background-color:#fff;
    border: 1px solid #1E78AB;
    color: #1E78AB;

}

html code

<button id="btn1" type="button" class="buttonInactive">Test</button>

Jquery 

$("#btn1").click(function () {

    });

Upvotes: 0

Views: 58

Answers (2)

Sanjit Bhardwaj
Sanjit Bhardwaj

Reputation: 893

$(document).ready(function(){
  $("#btn1").click(function(){
    if($(this).hasClass('buttonActive')){
       $(this).removeClass("buttonActive").addClass("buttonInactive");
       $('#idsToDisable').prop('disable', true);
     }else if($(this).hasClass('buttonInactive')){
       $(this).removeClass("buttonInactive").addClass("buttonActive");
       $('#idsToDisable').prop('disable', false);
     }
  });
});

Edited as per comment

Upvotes: 1

David S&#246;derberg
David S&#246;derberg

Reputation: 19

 var myButton = $('#btn');
            myButton.click(function () {
                if ($(this).hasClass('inActive')) {
                    $(this).removeClass('inActive').addClass('active');
                    $(this).css('color', 'blue');
                } else {
                    $(this).removeClass('active').addClass('inActive');
                    $(this).css('color', 'white');
                }
            });
#btn{
color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='inActive' id='btn'>Click here</button>

Upvotes: 1

Related Questions