Enable button on checkboxes

by akmiecik

HTML

<div id="ride_data">
<form method="POST" id="myForm" action="https://alank.net/bike-reply-3/" autocomplete="off" name="myForm">
<input class="hide" type="number" id="" name="week_num" step="1" max="53" value=""><br>
<input class="hide" type="number" id="month_num" name="month_num" step="1" max="12" value=""><br>
<textarea type="textarea" id="notes" rows="2" cols="50" name="notes" value="notes" style="text-align: left;">notes</textarea><p></p>
<div id="bike_color">
<label for="red">Red <input type="radio" id="red" onclick="" name="bike_color" value="red" checked="checked" data-type="horizontal"></label><label for="yellow">Yellow  <input type="radio" onclick="" id="yellow" name="bike_color" value="yellow" data-type="horizontal"></label><label for="gray">Gray<input type="radio" onclick="" id="gray" name="bike_color" value="gray" data-type="horizontal"></label>
</div>
<div id="top_part">
<div id="row_1">
<label for="date_today"><span>Ride date:</span><br>
<input type="date" id="date_today" name="date_today" value=""><br>
</label><p></p>
<div id="distance_box"><label><span>Miles:</span><br>
<input pattern="[0-9]*" inputmode="decimal" type="number" id="distance" step=".01" name="distance" onchange="calc()"><br>
</label>
</div>
</div>
<div id="row_2">
<label id="time" class="go_left"><span>Time:</span></label><br>
<span id="time_inputs"><br>
<select pattern="[0-9]*" type="number" id="hours" name="hours" onchange="calc()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select><span class="colon">:</span><select pattern="[0-9]*" type="number" id="minutes" name="minutes"...

CSS

body, h1, .entry-title a, .entry-content h1, h2, .entry-content h2, h3, .entry-content h3, h4, .entry-content h4, h5, .entry-content h5, h6, .entry-content h6 {
    color: #101072;
}
hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    /* margin-bottom: 1.5em; */
    position: relative;
    bottom: 11px;
}
hr#hr_two {
    bottom: 65px;
}
article {
    margin-bottom: 150px;
    background: #fefefe;
    border-radius: 30px;
    padding: 1%;
}
.hide {display: none;}
div#today {
    position: absolute;
    top: 33px;
    width: 343px;
    text-align: center;
    font-size: 24px;
}
span#first_radios {
    position: absolute;
    top: 80px;
    width: 343px;
    text-align: center;
}
input[type="radio"] {
    margin-left: 6px;
    margin-right: 8px;
}
textarea#notes {
    position: absolute;
    top: 120px;
    width: 90%;
    left: 5%;
    border-radius: 20px;
    font-size: 18px;
    padding: 0 10px;
}
div#swim_data {
	  visibility: hidden;
    position: absolute;
    left: 15px;
}
#bike_color {
    position: absolute;
    top: 200px;
    width: 343px;
    text-align: center;
}
#hours, #minutes, #seconds, #average, #max, #temp, #direction, #wind_dir, #wind_speed, #wind_gust {
    font-size: 20px !important;
    border-radius: 10px;
    background: #ffffff;
}
div#top_part {
    position: relative;
    bottom: 93px;
}
#row_1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
        position: relative;
        z-index: 1;
    }
   
    #row_1 label {
        grid-area: 1 / 1 / 4 / 3;
    }
    input#date_today {
        width: 175px;
        height: 51px;
    }   
    div#distance_box {
        grid-area: 1 / 2 / 4 / 3;
    }
    #distance_box input {
        width: 90%;
    }
    #row_2 #time_inputs select {
        height: 43px;
        width: 84px !important;
    }
    #row_2 #time_inputs {
        position: relative;
        bottom: 79px;
        left: 80px;
...

JavaScript

$(function(){
    
    function areChecked(){
       var is_1_checked = $('#out').is(':checked');  
       var is_2_checked = $('#splits').is(':checked');
        
       return is_1_checked == is_2_checked == true;
    }
    
   
    $('#check_1').on('click', function(){
        if (areChecked())
         enableButton(false);
    });
    
    $('#check_2').on('click', function(){
       if (areChecked())
         enableButton(false);
    });   
    
});