troubleshooting Question

How can I make the first part identical to the second ?

Avatar of Jazzy 1012
Jazzy 1012 asked on
JavaScriptCSS
1 Comment1 Solution122 ViewsLast Modified:
see.png
My outcome is the first part of the image, however I want the second part! Here is my code:

Css:
label .hide11{
	display: none;
}.colour-button1 {
  display: none;
}
.colour-button1 + label {
  background:  #c1c1c1;
  color: white;
  border-radius: 5px;
  padding: 18px 200px;
}
.colour-button1:checked + label {
  background: #cf5630;
}
.labe1{
	padding:18px 207px !important;
}

Code + js:
<form>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" /><label for="btn1"><i class="fa fa-check-circle hide11" id="chk-btn1"></i>  Thursday, March 2nd</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn2" /><label for="btn2" class="labe1"><i class="fa fa-check-circle hide11" id="chk-btn2"></i>  Tuesday, March 7th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn3" /><label for="btn3"><i class="fa fa-check-circle hide11" id="chk-btn3"></i>  Thursday, March 16th</label>
<br><br>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn4" /><label for="btn4" class="labe1"><i class="fa fa-check-circle hide11" id="chk-btn4"></i>  Tuesday, March 21st</label>
</form>
</center>
<center class="cen">
<button  class="disabled white cbtn1 c2" type="submit" id="submit" disabled>NEXT &nbsp;&nbsp;&nbsp;<i class="fa fa-long-arrow-right"></i></button>
</center>

<script>
$('.colour-button1').click(function () {
	$("#chk-"+this.id).show();
    //check if checkbox is checked
    if ($(this).is(':checked')) {

	$('#submit').removeAttr('disabled').addClass('orangeBtn23').removeClass('disabled'); //enable input

    } else {
        $('#submit').attr('disabled', true).removeClass('orangeBtn23').addClass('disabled'); //disable input
        $("#chk-"+this.id).hide(); 
    }
});

</script>
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros