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

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

1 个答案: