2012-05-25 4 views
1

두통이 발생했습니다. 선택 옵션 (05/30/2012 EQ)을 선택했을 때 선택 버튼을 클릭하여 작업을 제출할 수는 없지만 클릭 할 수 있어야합니다. Chrome과 I.E에서 문제가 발생하지만 FF로 문제가됩니다. Jquery 비 호환성 문제라고 생각합니다.Chrome의 Jquery 비 호환성 문제

function $recalcSelection($checkbox) { 
    $selectActionList.find("option").each(function() { 
     $optionLength = $table.find("td.actioncolumn input:checked").length; 
     if($optionLength <= 0) { 
     $(this).attr("disabled", true); 
     } else if($optionLength == 1) { 
     $(this).attr("disabled", false); 
     } else { 
     if(
      $(this).val() == "editAppointment" || 
      $(this).val() == "copyAppointment" || 
      $(this).val() == "viewShowList" || 
      $(this).val() == "viewScheduledTimes") 
     { 
      $(this).attr("disabled", true); 
     } else { 
      $(this).attr("disabled", false); 
     } 
     } 
    }); 

    if($selectActionList.find("option:selected").attr('disabled')) { 
     $selectActionList.find("option:enabled").eq(0).attr("selected", true); 
    } 

    if($selectActionList.find("option:enabled").length <= 0) { 
     $selectActionButton.attr("disabled", true); 
    } else { 
     $selectActionButton.attr("disabled", false); 
    } 
    } 

$ selectActionButton 버튼을 제출하고, $의 selectactionlist는 선택 목록을 다음과 같이 나는 내 코드의 일부를 첨부. Chrome에서 길이 ($ optionActionList.find ("option : enabled") 길이)를 인쇄하려고했으나 0입니다. 그러나 FF로 인쇄하면 7이됩니다. 왜 누군가가 나를 알아 내도록 도울 수 있습니까? 그것을 감사 덕분에 다음과 같이 나는 HTML 테이블의 일부를 첨부

enter image description here

:.

<table id="appointmentTable"> 
    <thead> 
    <tr class="headerrow"> 
     <th class="actioncolumn"></th> 
     <th class="datecolumn">Date</th> 
     <th class="earliesttimecolumn">Start Time</th> 

     <th class="clientnamecolumn">Client</th> 
     <th class="locationcolumn">Location</th> 
     <th class="roomcolumn">Rooms</th> 
     <th class="typecolumn">Type</th> 
     <th class="filledtimescolumn">Filled Times</th> 
    </tr> 

    </thead> 

    <tbody> 

     <tr class=" hiddenrow" appointmentid="15166"> 
     <td class="actioncolumn"><input type="checkbox" name="appointmentids[]" value="15166" /></td> 
     <td class="datecolumn"><span title="1338094800"></span><a href="?action=viewDailyUsers&date=05/27/2012&clients[]=8" title="View Appointments on 05/27/2012">05/27/2012</a></td> 
     <td class="earliesttimecolumn"></td> 
     <td class="clientnamecolumn">CPH</td> 
     <td class="locationcolumn">New Location</td> 
     <td class="roomcolumn"></td> 

     <td class="typecolumn">Screening</td> 
     <td class="filledtimescolumn">0/0</td> 
     </tr> 
    </tbody> 

    <tfoot> 
    <tr class="actionrow"> 
     <td colspan="2" class="actioncolumn"></td> 
     <td colspan="6">With Selected:</td> 
    </tr> 
    <tr class="actionrow"> 
        <td colspan="2" class="actioncolumn"> 

     <input type="submit" name="button" value="Create New" /> 
     </td> 
        <td colspan="6"> 
     <select id="selectactionlist" name="selectaction"> 
          <optgroup label="Adjustments"> 
      <option value="editAppointment">Edit</option> 
      <option value="copyAppointment">Copy</option> 
      <option value="deleteAppointment">Delete</option> 

      </optgroup> 
          <optgroup label="Lists"> 
           <option value="viewShowList">Show/No Show List</option> 
           <option value="viewScheduledTimes">Schedule List</option> 
      </optgroup> 
          <optgroup label="Hidden"> 
      <option value="hideAppointment">Hide</option> 

      <option value="showAppointment">Show</option> 
      </optgroup> 
         </select> 
     <input id="selectactionbutton" type="submit" name="button" value="Select" /> 
     </td> 
    </tr> 
    </tfoot>   
+0

을보십시오이'$ (이) .attr ("장애인"거짓)''$해야합니다 (이). prop ("disabled", false); ' – asawyer

+0

의미가 있기 위해서는 HTML을 게시해야합니다. – j08691

+0

@asawyer'prop'는 더 나은 연습이지만, OP 질문에는 아무런 차이가 없습니다 :) – mattytommo

답변

1

대신하고 다음

if (foo) { 
     $(this).attr("disabled", true); 
    } else { 
     $(this).attr("disabled", false); 
    } 
당신은 추가해야

및 비활성화 된 속성을 제거하면 비활성화 된 속성이있어 비활성화 될 수 있습니다 (크롬이 비활성화 된 상태로 유지하는 이유). 대신이 시도 :

if (foo) { 
    $(this).attr("disabled", true); 
} else { 
    $(this).removeAttr("disabled"); 
} 

편집 :이 정확한 코드

function $recalcSelection($checkbox) { 
    $selectActionList.find("option").each(function() { 
     $optionLength = $table.find("td.actioncolumn input:checked").length; 
     if($optionLength <= 0) { 
      $(this).attr("disabled", true); 
     } else if($optionLength == 1) { 
      $(this).removeAttr("disabled"); 
     } else { 
      if($(this).val() == "editAppointment" || 
       $(this).val() == "copyAppointment" || 
       $(this).val() == "viewShowList" || 
       $(this).val() == "viewScheduledTimes") 
      { 
       $(this).attr("disabled", true); 
      } else { 
       $(this).removeAttr("disabled"); 
      } 
     } 
    }); 

    if($selectActionList.find("option:selected").attr('disabled') != "true") { 
     $selectActionList.find("option").filter(function() { return $(this).attr("disabled") != null}).eq(0).attr("selected", true); 
    } 

    if($selectActionList.find("option").filter(function() { return $(this).attr("disabled") != null}).length <= 0) { 
     $selectActionButton.attr("disabled", true); 
    } else { 
     $selectActionButton.removeAttr("disabled"); 
    } 
}​ 
+1

그런 다음이 모든 것을 다른 모든 컨트롤에 대한 작은 jQuery 플러그인 추상화로 마무리하십시오. – asawyer

+0

+1 @ 그저께 :) – mattytommo

+0

Mattytommo, 답변 주셔서 감사합니다. 그러나 문제가 해결되지 않았습니다. 나 또한 attr을 소품으로 대체하려고 시도했는데 작동하지도 않았다. 나는 모른다. 혼란스러운 –