0

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

这是 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();
    }
})   
})

任何帮助表示赞赏。谢谢！！

4

1 回答 1

2

尝试

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

})

演示：小提琴

于 2013-04-29T09:54:44.307 回答