Disabling form fields on select using jQuery

Question

I have a simple booking form with different types of events. When a certain event is triggered which is called FST I want the other fields to be disabled and autofilled with timings/numbers. I have managed to work out how to get the event fields to disable but no matter which select field I use it always autofills the numbers and I can't visualize why. Any help would be great.

<select id="jq-Type" name="Type">
  <option value="PET">Pre-Employment Training</option>
  <option value="FST">Functional Skills Testing</option>
  <option value="ICT">ICT Testing</option>
</select>

<script>
  $(document).on('change', '#jq-Type', function() {
    var shouldEnable = $(this).val() == 'FST';

    $("input[name='BookingLimit']:eq(0)").val('21');
    $('#jq-BookingLimit').prop('disabled', shouldEnable);
    $("select[name='StartTimeHour']:eq(0)").val('09');
    $('#jq-StartTimeHour').prop('disabled', shouldEnable);
    $("select[name='StartTimeMinute']:eq(0)").val('30');
    $('#jq-StartTimeMinute').prop('disabled', shouldEnable);
    $("select[name='EndTimeHour']:eq(0)").val('15');
    $('#jq-EndTimeHour').prop('disabled', shouldEnable);
    $("select[name='StartTimeMinute']:eq(0)").val('00');
    $('#jq-EndTimeMinute').prop('disabled', shouldEnable);
  });
</script>

Here's a demo https://jsfiddle.net/02mv54ao/ and even though I only want the timings to change for FST it changes on any of the Type select option

Could you add a snippet or fiddle with your current code? — Gerry
– Gerry, Commented Jun 5, 2017 at 21:09
What do you expect to happen? maybe you mean something like this? jsfiddle.net/o1pdnafj/1 — Ziv Weissman
– Ziv Weissman, Commented Jun 5, 2017 at 21:40
Please include a minimal reproducible example in the question itself, not only on a third-party site. — Heretic Monkey
– Heretic Monkey, Commented Jun 5, 2017 at 21:41

Ziv Weissman · Accepted Answer · 2017-06-05 21:52:31Z

3

You are disabling the elements only if that value is selected, but you are always changing the other elements values no matter what.

Add "if" do your statement and you're good to go.

$(document).on('change', '#jq-Type', function() {
    var shouldEnable = $(this).val() == 'FST';
    if (shouldEnable){
        $("input[name='BookingLimit']:eq(0)").val('21');
        $("select[name='StartTimeHour']:eq(0)").val('09');
        $("select[name='StartTimeMinute']:eq(0)").val('30');
        $("select[name='EndTimeHour']:eq(0)").val('15');
        $("select[name='StartTimeMinute']:eq(0)").val('00');
    }
    $('#jq-BookingLimit').prop('disabled', shouldEnable);
    $('#jq-StartTimeHour').prop('disabled', shouldEnable);
    $('#jq-StartTimeMinute').prop('disabled', shouldEnable);
    $('#jq-EndTimeHour').prop('disabled', shouldEnable);
    $('#jq-EndTimeMinute').prop('disabled', shouldEnable);    
});

edited Jun 5, 2017 at 21:52

answered Jun 5, 2017 at 21:50

Ziv Weissman

4,5664 gold badges31 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ziv Weissman Over a year ago

np but please edit your post to include everything on that fiddle. @JosephGregory

Collectives™ on Stack Overflow

Disabling form fields on select using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related