2011-12-01 6 views
0

Hy!jquery로 일정 확인

사용자는 "체크리스트"에서 어떤 요일을 선택할 수있는 작업 일정이 있습니다. 아래 이미지와 같이 : 선택 사용자가 월요일에 작업 할 경우

enter image description here

나는이 일정을 확인하기 위해 노력하고있어 ... 그는 도착 시간과 출발 시간을 삽입해야합니다. 이것은 전체 양식에서 발생해야합니다.

가장 좋은 방법은 무엇입니까?

Tks!

편집 :

HTML ...

<table class="tabelaDados" id="tbEscalaSemana"> 
<thead> 
    <tr> 
     <th> 
      dia 
     </th> 
     <th> 
      Trabalha? 
     </th> 
     <th> 
      Entrada <span class="labelAvisoTela">(08:30)</span><a title="Replicar horários" href="#" 
       class="iconCopiar" id="btnCopEnt"></a> 
     </th> 
     <th> 
      Saída<span class="labelAvisoTela">(17:30)</span><a title="Replicar horários" href="#" 
       class="iconCopiar" id="btnCopSai"></a> 
     </th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      Seg 
     </td> 
     <td> 
      <input id="chkSeg" type="checkbox" name="chkSeg" /> 
     </td> 
     <td> 
      <input name="txtEntSeg" type="text" id="txtEntSeg" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiSeg" type="text" id="txtSaiSeg" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Ter 
     </td> 
     <td> 
      <input id="chkTer" type="checkbox" name="chkTer" /> 
     </td> 
     <td> 
      <input name="txtEntTer" type="text" id="txtEntTer" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiTer" type="text" id="txtSaiTer" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Qua 
     </td> 
     <td> 
      <input id="chkQua" type="checkbox" name="chkQua" /> 
     </td> 
     <td> 
      <input name="txtEntQua" type="text" id="txtEntQua" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiQua" type="text" id="txtSaiQua" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Qui 
     </td> 
     <td> 
      <input id="chkQui" type="checkbox" name="chkQui" /> 
     </td> 
     <td> 
      <input name="txtEntQui" type="text" id="txtEntQui" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiQui" type="text" id="txtSaiQui" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Sex 
     </td> 
     <td> 
      <input id="chkSex" type="checkbox" name="chkSex" /> 
     </td> 
     <td> 
      <input name="txtEntSex" type="text" id="txtEntSex" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiSex" type="text" id="txtSaiSex" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Sab 
     </td> 
     <td> 
      <input id="chkSab" type="checkbox" name="chkSab" /> 
     </td> 
     <td> 
      <input name="txtEntSab" type="text" id="txtEntSab" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiSab" type="text" id="txtSaiSab" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Dom 
     </td> 
     <td> 
      <input id="chkDom" type="checkbox" name="chkDom" /> 
     </td> 
     <td> 
      <input name="txtEntDom" type="text" id="txtEntDom" class="campoHora txtEntrada" /> 
     </td> 
     <td> 
      <input name="txtSaiDom" type="text" id="txtSaiDom" class="campoHora txtSaida" /> 
     </td> 
    </tr> 
</tbody> 

답변

1

, 당신은이 방법을 확인할 수 있습니다 그 행. 그런 다음 각각의 검사를 반복하여 비어 있지 않은지 확인합니다. 테이블에 적어도 하나 개의 체크 박스를 선택하면 http://jsfiddle.net/jfriend00/fYdEe/ 당신의 후속 질문에 대한

이 확인됩니다 :

당신은 당신의 HTML에 여기서 일 볼 수 있습니다

if ($('#tbEscalaSemana :checked').length == 0) { 
    // no checkboxes checked 
} 

또한 추가 이 jsFiddle에 : http://jsfiddle.net/jfriend00/fYdEe/.

+0

대단원입니다! ks스. – Thiago

+0

그리고 적어도 하나의 체크 노드가 선택되었는지 어떻게 확인할 수 있습니까? – Thiago

+0

확인란을 선택하지 않았는지 확인하는 코드가 내 대답의 끝에 추가되었습니다. – jfriend00

1

난 당신이 여기 TR과 TD 구조를 사용한다고 가정합니다. 모든 행에 대해 확인란이 선택되어 있는지 확인할 수 있습니다. 입력이 채워 져야합니다.

$(':checked').siblings('input').each(function(){ 
if($(this).val() == "") { 
    // THROW APPROPRIATE ERROR 
} 
}); 

희망이 도움이됩니다.

P. : HTML 코드를 사용하면 훨씬 쉬워졌습니다.

$('#tbEscalaSemana :checked').closest("tr").find('.campoHora').each(function(){ 
    if($(this).val() == "") { 
     alert("You must provide start/stop times for all days you are working!"); 
     return(false); 
    } 
});  

이 테이블에있는 모든 체크 박스를 발견하고 각각에 대해, 그것은 .campoHora 클래스 내에서의 부모 행과 검색을 발견 : 당신의 HTML을 사용하여

+0

Tks! 나는 이것을 시험해 볼 것이다! – Thiago

+0

시작/중지 시간 필드가 체크 상자의 형제가 아니기 때문에이 기능이 작동하지 않는다고 생각합니다. – jfriend00

관련 문제