jQuery复选框基于复选框值禁用/启用辅助输入 [英] jQuery checkbox disable/enable secondary inputs based on checkbox value

问题描述

我有一个使用专用复选框的表单(这是一个WordPress插件，Contact 7，fyi).有两个复选框选择，是和否.如果他们选择是"，则说明我有一个正在启用的文本字段(默认情况下已将其禁用).如果他们选择否，那么我将启用第二个排他性复选框，其中包含2个要启用的框(默认情况下也是).可以推测，当用户选择是"时，它也应禁用第二个复选框.如果他们选择不，我希望文本字段返回禁用状态.

I have a form (it's a WordPress plugin, Contact 7, fyi) that uses an exclusive checkbox. There are two checkbox choices, yes and no. If they check yes, I have a text field that I am enabling (I have disabled it by default). If they check no, I have a second exclusive checkbox with 2 boxes that I am enabling (also by default). As you can surmise, when the user selects yes, it also should disable the second checkbox. And if they choose no, I want the text field to return to disabled state.

因此我可以进行此工作，除了它无法识别更改事件；换句话说，如果我选择是"，它将启用文本字段，但是如果我随后选择否"，则它不会更新其他输入元素的关联状态.我必须取消选中否"，然后重新选中它，以使其执行功能.这是我的jQuery代码段:

So I have this working, except, it doesn't recognize the change event; in other words, if I check yes, it enables the text field, but if I then check no, it does not update the associated states of the other input elements. I have to uncheck the no, then recheck it, in order for it to perform the function. Here is my jQuery code snippet:

$(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);
        }
    })
});​

关于如何解决和纠正它的任何建议?谢谢.

Any suggestions on how to account for this and correct it? Thank you.

推荐答案

下面是一个示例要求，希望对您有帮助

Here is an example of what you asked for, hope it helps

$(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);             
            }
        }
    });
});​

这篇关于jQuery复选框基于复选框值禁用/启用辅助输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！