2013-09-23 2 views
4

Fiddle선택 항목에 따라 옵션을 비활성화하십시오.

도와주세요. 나는 이미 이것에 대해 봤지만 정확한 해결책을 찾을 수는 없다.

나는 "오늘부터"& 다른 날짜를 선택하기위한 두 개의 드롭 다운을 가지고 있습니다. 예 : "from date"드롭 다운에서 10을 선택하면 "to to date"드롭 다운에서 10 & 10 미만의 옵션을 비활성화해야합니다.

참고 : Fiddle에있는 테이블 행은 정적 2 행이 아닙니다. 그것은 나 여기

이상의

Image1

가 최신 날짜에서 내 코드

$(".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'); 
}); 

3 수

Image2

+1

두 번째 드롭 다운에서 1-9를 제거하는 것이 더 이상적이지 않습니까? 왜 그냥 데이트 피커를 사용하지 않는거야? –

+0

@SimonVerhoeven 내 고객의 요구 사항은 ... – rynhe

+1

거기에 좋은 datepickers가 많이 있습니다, 자신을 좀 스트레스를 저장합니다. :) jQuery UI도 [있다] (http://jqueryui.com/datepicker/). – azz

답변

3

글쎄, 솔직히 말해서 은 정말로입니다. 그렇지 않으면 jQuery datepicker를 사용해야합니다. 그렇지 않으면 선택한 숫자가 해당 달의 유효한 날짜인지 계산하는 로직을 구축해야합니다. 어떤 사람이 2 월 30 일을 선택하고 도약 연도를 확인합니다.

문제를 직접 해결하려면 선택한 값보다 더 낮은 (또는 동일한) 값이있는 옵션을 찾아야합니다. filter을 사용할 수 있습니다. 수행하여 :

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

HERE

+0

좋은 답변이지만, 꼭 추가해야한다. if (target.val()

1

내가 개인적으로 JQuery와 날짜 선택기를 사용하는 것을 선호 참조 사용하려는 경우 여기를

012,369,349을 수행 할 방법

$(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 : 당신이

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

임의의 datepicker를 관리하는 방법 ????? – rynhe

+0

랜덤 datepicker 란 무엇을 의미합니까? – coder

+0

"더 추가"& "제거"버튼이 있습니다. 추가 버튼을 한 번 더 누르면 두 개의 날짜 선택 도구가 추가됩니다 ... 그러면 어떻게 처리 할 수 ​​있습니까? – rynhe

1

을 요구 한 내용을 바탕으로

DEMO

나는 좋을 것 :

$(".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/

관련 문제