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

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