Question

HY！

我有一个工作时间表，用户可以在“清单”中选择工作日期。如下图所示：

enter image description here

我正在尝试验证此计划...如果用户选择在星期一工作，他必须插入到达时间和出发时间。这应该以整个形式发生。

这样做的最佳方式是什么？

韩国社交协会！

编辑：

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>

Answer 1

我想你在这里使用tr和td结构。对于每一行，您可以检查是否选中了复选框，然后应填写输入。

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

希望这会有所帮助。

P.S。：使用表格的HTML代码会更容易。

Answer 2

使用您的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上看到它：http://jsfiddle.net/jfriend00/fYdEe/

对于您的后续问题，这将检查表格中是否至少选中了一个复选框：

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

我还将此添加到jsFiddle：http://jsfiddle.net/jfriend00/fYdEe/。

使用jquery验证计划

2 个答案: