javascript - 如果在选定单选按钮的文本框中输入值，则启用按钮

Question

我有三个单选按钮，它们是三个选项，选择后，将显示它们的子选项。当在当前选定选项的子选项文本框中输入一些文本时，应启用下一个按钮。必须输入一个选项下的所有子选项。因此，如果在选定选项下的所有文本框中输入了值并且具有某些最小定义长度，我想启用下一个按钮。我该怎么做？

这是 jsfiddle 链接: http://jsfiddle.net/yYJQY/2/

我的代码:

<div>
<input type="radio" value="1" name="options" />Option1
<input type="radio" value="2" name="options" />Option2
<input type="radio" value="3" name="options" />Option3
</div>
<div id="option1" style="display: none;">
<label>Enter Value:</label><input type="text" name="value_option1" />
</div>
<div id="option2" style="display: none;">
<label>Enter value1:</label><input type="text" name="value_option2_1" /><br />
<label>Enter value2:</label><input type="text" name="value_option2_2" />
</div>
<div id="option3" style="display: none;">
<label>Select a number:</label>
<select name="quantity" id="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select> <br />
<input type="text" id="val1" /> <br />
<input type="text" id="val2" /> <br />
<input type="text" id="val3" /> <br />
</div>
<button disabled>NEXT</button>

我的脚本:

$(document).ready(function () {
$('input[name=options]').bind('change' ,function() {
if($(this).val() == '1') {
    $('#option1').show();
    $('#option2').hide();
    $('#option3').hide();
}
if($(this).val() == '2') {
    $('#option2').show();
    $('#option1').hide();
    $('#option3').hide();
}
if($(this).val() == '3') {
    $('#option2').hide();
    $('#option1').hide();
    $('#option3').show();
}
})
$('#val2').hide();
$('#val3').hide();
$('#number').bind('change', function() {
    if($(this).val() == '1') {
        $('#val1').show();
        $('#val2').hide();
        $('#val3').hide();
    }
    if($(this).val() == '2') {
        $('#val1').show();
        $('#val2').show();
        $('#val3').hide();
    }
    if($(this).val() == '3') {
        $('#val1').show();
        $('#val2').show();
        $('#val3').show();
    }
})   
})

感谢任何帮助。谢谢!!

Answer 1

尝试

$(document).ready(function () {
    $('input[name=options]').bind('change' ,function() {
        $('button').prop('disabled', true)
        if($(this).val() == '1') {
            $('#option1').show();
            $('#option2').hide();
            $('#option3').hide();
        }
        if($(this).val() == '2') {
            $('#option2').show();
            $('#option1').hide();
            $('#option3').hide();
        }
        if($(this).val() == '3') {
            $('#option2').hide();
            $('#option1').hide();
            $('#option3').show();
        }
    })
    $('#val2').hide();
    $('#val3').hide();
    $('#number').bind('change', function() {
        if($(this).val() == '1') {
            $('#val1').show();
            $('#val2').hide();
            $('#val3').hide();
        }
        if($(this).val() == '2') {
            $('#val1').show();
            $('#val2').show();
            $('#val3').hide();
        }
        if($(this).val() == '3') {
            $('#val1').show();
            $('#val2').show();
            $('#val3').show();
        }
        testButton(this)
    });

    function testButton(el){
        var inputs = $(el).closest('div[id^="option"]').find('input:text:visible');
        var flag = true;
        inputs.each(function(){
            if(!$(this).val()){
                flag = false;
                return false;
            }
        });
        $('button').prop('disabled', !flag)
    }

    $('input:text').on('change', function(){
        testButton(this)
    })

})

演示:Fiddle