2013-11-28 3 views
0

Jquery UI의 JDatePicker를 표시 할 때 문제가 있습니다. Combobox에서 onchange 이벤트가있을 때 다른 형식으로 표시하려고합니다. 이것은 내 코드이며 두 번째 onchange 이벤트가 트리거 될 때 작동하지 않습니다.Onchange Combobox 이벤트가 작동하지 않습니다.

자바 스크립트 코드

$(document).ready(function() { 
    $("tr.golf_name").hide(); 
    $("tr.location").hide(); 

    $('input.type').click(function(event){ 
     var selectVal = $(this).val(); 

     if(selectVal == "tournament") { 
      $("tr.golf_name").show(); 
      $("tr.location").show(); 
     } else { 
      $("tr.golf_name").hide(); 
      $("tr.location").hide(); 
     } 
    }); 

    $('#price_type').change(function(){ 
     var selectedVal = $(this).val(); 
     if(selectedVal != "none") { 
      $('#golf_name').attr("disabled", false); 
      $('#location').attr("disabled", false); 

      $('#startdate').attr("disabled", false); 
      $('#enddate').attr("disabled", false); 
      $('#start_time1').attr("disabled", false); 
      $('#start_time2').attr("disabled", false); 
      $('#end_time1').attr("disabled", false); 
      $('#end_time2').attr("disabled", false); 
      $('#details').attr("disabled", false); 
      $('#submit').attr("disabled", false); 

      if($("option:selected",this).text() == "weekday") { 
       // Holiday List 
       var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"]; 
       // Exeptions if some Weekends are Working days 
       var enableDay = ["3-3-2012", "10-3-2012", "17-3-2012"]; 
       // Weekend Days Sunday = 0 ... Sat =6 
       var weekend = [0, 6]; 
       function nationalDays(date) { 
        // get date 
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 


        // if Holiday then block it  
        if ($.inArray(dmy, unavailableDates) > -1) { 
         return [false, "", "Unavailable"]; 

        } 
        // if Exception then Enable it 
        if ($.inArray(dmy, enableDay) > -1) { 
         return [true, ""]; 

        } 

        //if Weekend then block it 
        if ($.inArray(date.getDay(), weekend) > -1) { 
         return [false, "", "Unavailable"]; 
        } 

        return [true, ""]; 
       } 

       $(function() { 
        $("#startdate").datepicker({ 
         dateFormat: 'dd MM yy', 
         beforeShowDay: nationalDays 
        }); 
       }); 
      } else { 
       var weekday = [1,2,3,4,5]; 
       function weekDays(date) { 
        // get date 
        dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); 

        //if Weekend then block it 
        if ($.inArray(date.getDay(), weekday) > -1) { 
         return [false, "", "Unavailable"]; 
        } 

        return [true, ""]; 
       } 

       $(function() { 
        $("#startdate").datepicker({ 
         dateFormat: 'dd MM yy', 
         beforeShowDay: weekDays 
        }); 
       }); 
      } 
     } else { 
      $('#golf_name').attr("disabled", true); 
      $('#location').attr("disabled", true); 

      $('#startdate').attr("disabled", true); 
      $('#startdate').attr("disabled", true); 
      $('#enddate').attr("disabled", true); 
      $('#start_time1').attr("disabled", true); 
      $('#start_time2').attr("disabled", true); 
      $('#end_time1').attr("disabled", true); 
      $('#end_time2').attr("disabled", true); 
      $('#details').attr("disabled", true); 
      $('#submit').attr("disabled", true); 
     } 
    }); 
}); 

이 내 HTML 코드입니다.

<tr height=22> 
      <td align=right>Select Price</td> 
      <td>: 
       <select name="price_type" id="price_type"> 
        <option value="none">Select Price Type</option> 
        <option value="2">tournament</option> 
        <option value="3">weekday</option> 
       </select> 
      </td> 
     </tr> 
     <tr><td bgcolor=d9d9d9 width=800 height=1 colspan=2></td></tr> 

<tr height=22> 
      <td align=right>Start Date</td> 
      <td>: 
       <input type="text" name="startdate" id="startdate" disabled /> (yyyy/mm/dd) 
      </td> 
     </tr> 
     <tr><td bgcolor=d9d9d9 width=800 height=1 colspan=2></td></tr> 

당신은 그것을 처리하는 방법이 Fiddle

에서 볼 수 있습니까? 고맙습니다.

답변

1

당신은 같은 대신 .attr()의 비활성 상태를 설정 .prop()를 사용해야합니다

$('#startdate').prop("disabled", true); 

읽기 : prop vs attr

데모 : Fiddle

+0

내 말은, '평일'을 선택하면 토요일과 일요일에 대한 Datepicker 쇼가 활성화됩니다. 그러나 내가 다른 것을 선택하면 월요일 ~ 금요일을 보여주고 싶습니다. 위의 바이올린을 확인할 수 있습니다. 고마워요 – fanjavaid

+1

@ fanjavaid 참조 http://jsfiddle.net/arunpjohny/uL7tZ/2/ –

+0

감사합니다 :) 그것은 작동합니다! – fanjavaid

0

내가 생각하는 문제는 여기에 var에 selectedVal = $ (이) .val(); 왜냐하면 당신은 콤보 박스가 부모이기 때문에 당신이 그것을 selectItem으로 가져와야하기 때문입니다.

관련 문제