disable options based on the selected

Question

Please help me. I already googled about this but I can't to find the exact solution.

I have two dropdowns, one for selecting "from date" & another to select "to date". For eg.: If I select 10 from "from date" dropdown, the options which is in "to date" less than 10 & 10 should be disabled in "to date" dropdown.

Note: Table rows which are in the Fiddle are not static 2 row. It may 3 or more than

Here is my code

$(".tfdate").change(function() { 
var target   = $(this).parent().siblings().find("select.ttdate");
target.find("option").removeAttr("disabled");
var selected = $(this).val();
target.find("option").prevUntil("option[value='"+selected+"']").attr('disabled','disabled');
//target.find("option").prevAll("option[value='"+selected+"']").attr('disabled','disabled');
});

From date

To date

Wouldn't it be more logical to remove 1-9 from the second dropdown? And why not just use a datepicker? — Simon Verhoeven, Sep 23 '13 at 09:33
There are a lot of good datepickers out there, save yourself some stress. :) jQuery UI even [has one](http://jqueryui.com/datepicker/). — azz, Sep 23 '13 at 09:35
What happen if any front user select ToDate first and after select front date and will do form submit ? so he need to put validation also for this — Kishan Patel, Sep 23 '13 at 09:51

score 3 · Accepted Answer · answered Sep 23 '13 at 09:35

Well, to be honest you should really use a jQuery datepicker, otherwise you'll have to build in logic to calculate whether the selected number is a valid day for that month (i.e. someone selecting the 30th February), also validating leap years etc.

To fix the problem at hand though, you need to find any option with a lower (or equal) value to the selected one, which you can use filter for by doing:

var selected = parseInt($(this).val());
target.find("option").filter(function () {
    return parseInt($(this).val()) === selected 
        || parseInt($(this).val()) < selected;
}).attr('disabled','disabled');

See HERE

Nice answer, although to be complete I guess you should add: if(target.val() < selected) { target.val(''); } in case the selected to is lower than the selected from — Simon Verhoeven, Sep 23 '13 at 09:52

coder · Answer 2 · 2013-09-23T10:37:22.160

1

I would personally prefer to use jquery date picker and if you want to use it here's the way to do it

DEMO

$(document).ready(function () {

    $("#dt1").datepicker({
        dateFormat: "dd-M-yy",
        minDate: 0,
        onSelect: function (date) {
            var date2 = $('#dt1').datepicker('getDate');
            date2.setDate(date2.getDate() + 1);
            $('#dt2').datepicker('setDate', date2);
            //sets minDate to dt1 date + 1
            $('#dt2').datepicker('option', 'minDate', date2);
        }
    });
    $('#dt2').datepicker({
        dateFormat: "dd-M-yy",
        onClose: function () {
            var dt1 = $('#dt1').datepicker('getDate');
            console.log(dt1);
            var dt2 = $('#dt2').datepicker('getDate');
            if (dt2 <= dt1) {
                var minDate = $('#dt2').datepicker('option', 'minDate');
                $('#dt2').datepicker('setDate', minDate);
            }
        }
    });
});

UPDATE:

DEMO

Based on what you have asked

$('#mybtn').click(function() {  
        var clone = $('.child:first').clone(true).appendTo('#child');
        clone.find('.myclass').datepicker();
});

edited Sep 23 '13 at 10:37

answered Sep 23 '13 at 09:37

coder

13,002
31
112
214

What do you mean by random datepicker ? – coder Sep 23 '13 at 10:07
I have "add more" & "remove" button..If I click addmore button one more row will add along with two date picker...then how can I manage this – rynhe Sep 23 '13 at 10:11
may be this is what you're looking for http://stackoverflow.com/questions/12219897/adding-time-jquery-ui-datepicker-dynamically/12220029#12220029 – coder Sep 23 '13 at 10:19
I am looking for [link](http://stackoverflow.com/questions/12222137/adding-jquery-ui-datepicker-dynamically-style-break) – rynhe Sep 23 '13 at 10:21
Updated my answer...check it and let me know. – coder Sep 23 '13 at 10:37

Ram · Answer 3 · 2013-09-23T09:43:55.083

1

I'd suggest:

$(".tfdate").change(function() { 
   $(this).closest('tr')
          .find('.ttdate option')
          .prop('disabled', false)
          .filter('[value="'+ this.value +'"]')
          .prevAll()
          .addBack()
          .prop('disabled', true);
});

http://fiddle.jshell.net/C66rf/

edited Sep 23 '13 at 09:43

answered Sep 23 '13 at 09:37

Ram

143,282
16
168
197

disable options based on the selected

3 Answers3