jQuery复选框根据复选框值禁用/启用辅助输入

时间:2012-09-07 17:18:34

标签: jquery checkbox

我有一个表单(它是一个WordPress插件,Contact 7,fyi),它使用一个独占复选框。有两个复选框选项,是和否。如果他们检查是,我有一个我正在启用的文本字段(我默认禁用它)。如果他们检查不是,我有一个第二个独占复选框,有2个盒子,我正在启用(默认情况下)。你可以猜测,当用户选择是时,它也应该禁用第二个复选框。如果他们选择否,我希望文本字段返回到禁用状态。

所以我有这个工作,除了,它不识别变化事件;换句话说,如果我检查是,它启用文本字段,但如果我然后检查否,它不会更新其他输入元素的关联状态。我必须取消选中no,然后重新检查它,以便它执行该功能。这是我的jQuery代码片段:

$(document).ready(function() {
    $('p#myTextFieldHolder input:text').val('').attr('disabled', true);
    $('#mySecondCheckBoxHolder input:checkbox').attr('disabled', true);

    $("#myCheckBoxHolder input").change(function() {

        if ($(":checked").val() == "If yes, what is the estimated closing date?") {

            $('p#myTextFieldHolder input:text').val('').attr('disabled', false);
            $('#mySecondCheckBoxHolder input:checkbox').attr('disabled', true);
        } else if ($(":checked").val() == "No:") {
            $('p#myTextFieldHolder input:text').val('').attr('disabled', true);
            $('#mySecondCheckBoxHolder input:checkbox').attr('disabled', false);
        } else {
            $('p#myTextFieldHolder input:text').val('').attr('disabled', true);
            $('#mySecondCheckBoxHolder input:checkbox').attr('disabled', true);
        }
    })
});​

有关如何解释并纠正此问题的任何建议?谢谢。

1 个答案:

答案 0 :(得分:2)

Here is an example你所要求的,希望有所帮助

$(function(){
    $('#chkboxes input:checkbox').on('change', function(){
        if($(this).is(':checked'))
        {
            if($(this).attr('id')=='yes')
            {         
                $('#txt1').prop('disabled', false);
                $('#chkno input:checkbox').prop('disabled', true).prop('checked', false);
                $('#no').prop('checked', false);  
            }
            else
            {
                $('#txt1').val('').prop('disabled', true);
                $('#chkno input:checkbox').prop('disabled', false);   
                $('#yes').prop('checked', false);             
            }
        }
    });
});​