如果选中复选框并且textarea为空,否则

时间:2015-05-06 23:28:10

标签: jquery

我查看了问题和答案,我几乎就在那里。只需要一点帮助即可完成。

如果用户选中一个复选框并将textarea留空inser消息。如果选中复选框并且textare不为空,请显示答案。

我只希望在选中复选框时在每一行上运行操作。目前它会影响所有行。谢谢你的帮助

<table id="activity">
    <thead>
        <tr>
            <th scope="col">1</th>
            <th scope="col">2</th>
            <th scope="col">3</th>
            <th scope="col">4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="answer" /></td>
            <td>concrete</td>
            <td><textarea id="response1" name="response1" title="response1" rows="3" class="form-control"></textarea></td>
            <td class="answer_block"><span>Answer 1</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="answer" /></td>
            <td>concrete</td>
            <td><textarea id="response2" name="response2" title="response2" rows="3" class="form-control"></textarea></td>
            <td class="answer_block"><span>Answer 2</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="answer" /></td>
            <td>concrete</td>
            <td><textarea id="response3" name="response3" title="response3" rows="3" class="form-control"></textarea></td>
            <td class="answer_block"><span>Answer 3</span></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3"><button type="submit" name="check" id="button-check">Check</button> <button type="reset" name="reset" value="reset" id="button-reset">Reset</button></td>
        </tr>
    </tfoot>

</table>

脚本

$('button#button-check').on('click' , function() {
    $('.answer').each(function() {
        if ($(this).is(':checked') && !$.trim($(".form-control").val()).length ){
           $('.form-control').val('Input can not be left blank');
           $(this).parent().siblings().children('span').hide();
       } else {
        $(this).parent().siblings().children('span').show();
        } 
    });
});

1 个答案:

答案 0 :(得分:1)

可能会有所帮助

$('button#button-check').on('click' , function() {
$('.answer').each(function() {
    if ($(this).is(':checked') && $(this).closest('tr').find('textarea').val() == ""){
      $(this).closest('tr').find('.form-control').attr('placeholder','Input can not be left blank');
       $(this).closest('tr').find('.answer_block span').hide();
   } else if($(this).is(':checked')){
       $(this).closest('tr').find('.answer_block span').show();
    } 
});

});

JSFIDDLE