Serious newb question about disabling a form element when a radio button is checked
Hello!
I've been at this for a good portion of the day on and off! A bit of Googling and bit of trying this and that with out much luck!
This is my little test form. There's three radio buttons with the name of locations and the id's of a-pos, b-pos and c-pos respectively. Now here's the crazy part. I can't figure out for the life of me why when I click the radio button a-pos that the tday form element disables but when I choose another radio button it still stays disabled.
So what am I doing wrong???
Thanks for the help! I've about gone stir crazy looking at this and I'm probably going to certifiable once I'm shown the iddt biddy mistake I made!
I've been at this for a good portion of the day on and off! A bit of Googling and bit of trying this and that with out much luck!
This is my little test form. There's three radio buttons with the name of locations and the id's of a-pos, b-pos and c-pos respectively. Now here's the crazy part. I can't figure out for the life of me why when I click the radio button a-pos that the tday form element disables but when I choose another radio button it still stays disabled.
So what am I doing wrong???
Thanks for the help! I've about gone stir crazy looking at this and I'm probably going to certifiable once I'm shown the iddt biddy mistake I made!
- <!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form>
<div class="pos-container">
<ul>
<li>
<input type="radio" id="a-pos" name="locations" value="pickup">
<label for="a-pos">Pickup</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-pos" name="locations" value="dropoff">
<label for="b-pos">Drop Off</label>
<div class="check"><div class="inside"></div></div>
</li>
<li>
<input type="radio" id="c-pos" name="locations" value="both">
<label for="c-pos">Both</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
<div class="to-date">
<div class="border-t-month">
<select class="t-month" name="ToTripMonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6" selected>June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="border-t-day">
<select class="t-day" id="tday" name="ToTripDay">
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">4th</option>
<option value="5">5th</option>
<option value="6">6th</option>
<option value="7">7th</option>
<option value="8">8th</option>
<option value="9">9th</option>
<option value="10">10th</option>
<option value="11">11th</option>
<option value="12">12th</option>
<option value="13">13th</option>
<option value="14">14th</option>
<option value="15">15th</option>
<option value="16" selected>16th</option>
<option value="17">17th</option>
<option value="18">18th</option>
<option value="19">19th</option>
<option value="20">20th</option>
<option value="21">21st</option>
<option value="22">22nd</option>
<option value="23">23rd</option>
<option value="24">24th</option>
<option value="25">25th</option>
<option value="26">26th</option>
<option value="27">27th</option>
<option value="28">28th</option>
<option value="29">29th</option>
<option value="30">30th</option>
<option value="31">31st</option>
</select>
</div>
<div class="border-t-year">
<select class="t-year" name="ToTripYear">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017" selected>2017</option>
<option value="2018">2018</option>
</select>
</div>
<div class="border-t-time">
<select class="t-time" name="ToTripTime">
<option value="00:00">12:00 am</option>
<option value="00:15">12:15 am</option>
<option value="00:30">12:30 am</option>
<option value="00:45">12:45 am</option>
<option value="01:00">1:00 am</option>
<option value="01:15">1:15 am</option>
<option value="01:30">1:30 am</option>
<option value="01:45">1:45 am</option>
<option value="02:00">2:00 am</option>
<option value="02:15">2:15 am</option>
<option value="02:30">2:30 am</option>
<option value="02:45">2:45 am</option>
<option value="03:00">3:00 am</option>
<option value="03:15">3:15 am</option>
<option value="03:30">3:30 am</option>
<option value="03:45">3:45 am</option>
<option value="04:00">4:00 am</option>
<option value="04:15">4:15 am</option>
<option value="04:30">4:30 am</option>
<option value="04:45">4:45 am</option>
<option value="05:00">5:00 am</option>
<option value="05:15">5:15 am</option>
<option value="05:30">5:30 am</option>
<option value="05:45">5:45 am</option>
<option value="06:00">6:00 am</option>
<option value="06:15">6:15 am</option>
<option value="06:30">6:30 am</option>
<option value="06:45">6:45 am</option>
<option value="07:00">7:00 am</option>
<option value="07:15">7:15 am</option>
<option value="07:30">7:30 am</option>
<option value="07:45">7:45 am</option>
<option value="08:00">8:00 am</option>
<option value="08:15">8:15 am</option>
<option value="08:30">8:30 am</option>
<option value="08:45">8:45 am</option>
<option value="09:00">9:00 am</option>
<option value="09:15">9:15 am</option>
<option value="09:30">9:30 am</option>
<option value="09:45">9:45 am</option>
<option value="10:00">10:00 am</option>
<option value="10:15">10:15 am</option>
<option value="10:30">10:30 am</option>
<option value="10:45">10:45 am</option>
<option value="11:00">11:00 am</option>
<option value="11:15">11:15 am</option>
<option value="11:30">11:30 am</option>
<option value="11:45">11:45 am</option>
<option value="12:00" selected>12:00 pm</option>
<option value="12:15">12:15 pm</option>
<option value="12:30">12:30 pm</option>
<option value="12:45">12:45 pm</option>
<option value="13:00">1:00 pm</option>
<option value="13:15">1:15 pm</option>
<option value="13:30">1:30 pm</option>
<option value="13:45">1:45 pm</option>
<option value="14:00">2:00 pm</option>
<option value="14:15">2:15 pm</option>
<option value="14:30">2:30 pm</option>
<option value="14:45">2:45 pm</option>
<option value="15:00">3:00 pm</option>
<option value="15:15">3:15 pm</option>
<option value="15:30">3:30 pm</option>
<option value="15:45">3:45 pm</option>
<option value="16:00">4:00 pm</option>
<option value="16:15">4:15 pm</option>
<option value="16:30">4:30 pm</option>
<option value="16:45">4:45 pm</option>
<option value="17:00">5:00 pm</option>
<option value="17:15">5:15 pm</option>
<option value="17:30">5:30 pm</option>
<option value="17:45">5:45 pm</option>
<option value="18:00">6:00 pm</option>
<option value="18:15">6:15 pm</option>
<option value="18:30">6:30 pm</option>
<option value="18:45">6:45 pm</option>
<option value="19:00">7:00 pm</option>
<option value="19:15">7:15 pm</option>
<option value="19:30">7:30 pm</option>
<option value="19:45">7:45 pm</option>
<option value="20:00">8:00 pm</option>
<option value="20:15">8:15 pm</option>
<option value="20:30">8:30 pm</option>
<option value="20:45">8:45 pm</option>
<option value="21:00">9:00 pm</option>
<option value="21:15">9:15 pm</option>
<option value="21:30">9:30 pm</option>
<option value="21:45">9:45 pm</option>
<option value="22:00">10:00 pm</option>
<option value="22:15">10:15 pm</option>
<option value="22:30">10:30 pm</option>
<option value="22:45">10:45 pm</option>
<option value="23:00">11:00 pm</option>
<option value="23:15">11:15 pm</option>
<option value="23:30">11:30 pm</option>
<option value="23:45">11:45 pm</option>
</select>
</div>
</div>
</form>
<script>
$(document).ready(
function () {
$('input[type="radio"][name="locations"]').change(function () {
if ($(this).attr('id') == 'a-pos') {
$('#tday').prop('disabled', 'disabled');
} else {
$('#tday').removeProp('disabled');
}
});
});
</script>
</body>
</html>
Topic Participants
dave.handler
jakecigar