如果在所選單選按鈕的文本框中輸入值，則啟用按鈕

Question

我有三個單選按鈕，有三個選項，在選擇時，將顯示它們的子選項。 在當前所選選項的子選項文本框中輸入某些文本時，應啟用下一個按鈕。 輸入選項下的所有子選項是必須的。 因此，如果在所選選項下的所有文本框中輸入值並且具有某個最小定義長度 ，則我想啟用下一個按鈕。 我怎樣才能做到這一點？

這是jsfiddle鏈接： ：

我的代碼：

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

})

演示： 小提琴