We help IT Professionals succeed at work.

Can anyone see what is the fault in my javascript code?

Jazzy 1012
Jazzy 1012 asked
on
137 Views
Last Modified: 2017-03-21
<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 &nbsp;&nbsp;&nbsp;<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>

Open in new window


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

Open in new window


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.
Comment
Watch Question

CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
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.

Author

Commented:
Yes can you help me on how to solve it?
CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
I'll do my best.

Author

Commented:
Thanks
CERTIFIED EXPERT

Commented:
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.

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

Open in new window

Author

Commented:
That solves for my first javascript what about my second, it has the same fault
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(); 
    }
});

Open in new window

CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
Thank you soo much, you were a big help!

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions