Jazzy 1012
asked on
Can anyone see what is the fault in my javascript code?
<center>
<div class="tables">
<form>
<table class="table table-bordered">
<thead>
<tr>
<th class="thheader">Monday</th>
<th class="thheader">Tuesday</th>
<th class="thheader">Wednesday</th>
<th class="thheader">Thursday</th>
<th class="thheader">Friday</th>
</tr>
</thead>
<tr>
<td>
</td>
<td>
<center>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn1012" /><label for="btn1012"> <i class="fa fa-check-circle hide11" id="chk-btn1012"></i> 10am - 12pm</label>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn1214" /><label for="btn1214" class="labe"><i class="fa fa-check-circle hide11" id="chk-btn1214"></i> 5pm - 7pm</label>
</center>
</td>
<td>
</td>
<td>
<center>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn10" /><label for="btn10"><i class="fa fa-check-circle hide11" id="chk-btn10"></i> 10am - 12pm</label>
<input type="checkbox" class="colour-button" value="10 - 12" id="btn12" /><label for="btn12" class="labe"><i class="fa fa-check-circle hide11" id="chk-btn12"></i> 5pm - 7pm</label>
</center>
</td>
<td></td>
</tr>
</table>
</form>
</div>
</center>
<center class="cen">
<form>
<input type="checkbox" class="colour-button1" value="10 - 12" id="btn1" disabled/><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" disabled /><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" disabled/><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" disabled/><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 <i class="fa fa-long-arrow-right"></i></button>
</center>
</span>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".colour-button").click(enable_cb);
});
function enable_cb() {
if (this.checked) {
$("input.colour-button1").removeAttr("disabled");
$("#chk-"+this.id).show();
} else {
$("input.colour-button1").attr("disabled", true);
$("#chk-"+this.id).hide();
}
}
</script>
<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>
Css:
.colour-button {
display: none;
}
label:hover {
cursor: pointer;
}
.colour-button + label {
background: #c1c1c1;
color: white;
border-radius: 5px;
padding: 5px 10px;
}
.colour-button:checked + label {
background: #cf5630;
}
.thheader{
width:135px;
text-align:center;
background-color:#FAFAFA;
color: #18181d;
}
.tables{
width:800px;
}
.labe{
padding:5px 18px !important;
}
.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;
}
label .hide11{
display: none;
}
Heres how my code works:
When I click the first form, the second form becomes enabled for me to chose from, then the next button becomes enabled. But I noticed that if I pick more than one from the first form, then change my mind and remove one, the second form becomes disabled again, this also happens with the second form and the next button. How can I solve this issue? I want as long as ONE is checked, the second part should ALWAYs work.
Last Comment
Leonidas Dosas
The problem that you have is this. When I choose an option at the first form then I can choose an option at the second form.If I deselect the first form option the second one (that I chose before) "locked" in someway at display inline status and then unfortunately I can't deselect this. My opinion is to connect via data attr the two forms (eg when i select an input of the first then add a value to the second form input element of that day eg Tuesday or Thursday) so that the engine after the complete disabled of the first form option to disable the corresponding input day elements at the second form via another function.
ASKER
Yes can you help me on how to solve it?
I'll do my best.
ASKER
Thanks
Just change your enable_cb() function a bit.
If the target is checked, it can stay as it was (just using .prop() syntax instead).
If it's being unchecked, then instead of automatically processing, check if there's ANY other items that are checked before disabling.
Also added a condition to uncheck the second form at the same time as disabling, but can remove if that isn't what you wanted.
If the target is checked, it can stay as it was (just using .prop() syntax instead).
If it's being unchecked, then instead of automatically processing, check if there's ANY other items that are checked before disabling.
Also added a condition to uncheck the second form at the same time as disabling, but can remove if that isn't what you wanted.
function enable_cb() {
if (this.checked) {
//this will mean at least one is always checked
$("input.colour-button1").prop("disabled", false);
$("#chk-" + this.id).show();
}
else {
//in this case, hide the element if you need to, but check for ANY items
//$("input.colour-button1").attr("disabled", true);
$("#chk-" + this.id).hide();
if ($(".colour-button:checked").length == 0) {
$("input.colour-button1").prop("disabled", false).prop("checked", false);
}
}
}
ASKER
That solves for my first javascript what about my second, it has the same fault
Ill repost the javascript code:
Ill repost the javascript code:
$('.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();
}
});
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thank you soo much, you were a big help!
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
