I want to create 3 textfield which depend on radio button. When user click specific value of radio button , textfield appear depend on user choose and viceverse.
$(document).ready(function() {
$("input:radio[name=\'article\']").change(function() {
if (this.value == '1' && this.checked) {
$("#nmb").show();
}
else if(this.value == '2' && this.checked) {
$("#nbc").show();
}
else if(this.value == '3' && this.checked) {
$("#crdb").show();
} else {
$("#crdb").hide();
$("#nmb").hide();
$("#nbc").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<input type="radio" name="article" value="1"> NMB Bank <input type="radio" name="article" value="2">NBC Bank <input type="radio" name="article" value="3"> CRDB Bank <br/><br/>
<div id="nmb">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>
Is this what you looking for?
$(document).ready(function() {
$("input[name='article']").change(function() {
$(".AccountHolder").hide();
if ($(this).val() == 1) {
$("#nmb").show();
} else if (this.value == 2) {
$("#nbc").show();
} else if (this.value == 3) {
$("#crdb").show();
}
});
});
Note there is no reason to use this.checked.
Demo
$(document).ready(function() {
$("input[name='article']").change(function() {
$(".AccountHolder").hide();
if ($(this).val() == 1) {
$("#nmb").show();
} else if (this.value == 2) {
$("#nbc").show();
} else if (this.value == 3) {
$("#crdb").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<input type="radio" name="article" value="1"> NMB Bank <input type="radio" name="article" value="2">NBC Bank <input type="radio" name="article" value="3"> CRDB Bank <br/><br/>
<div id="nmb" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb" class="AccountHolder">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>
First you need to add a class to all div for example account_number:
<div id="nmb" class="account_number">Account Number: <input type="text" name="number" maxlength="11"><br><br> </div>
<div id="nbc" class="account_number">Account Number: <input type="text" name="number" maxlength="13"><br><br> </div>
<div id="crdb" class="account_number">Account Number: <input type="text" name="number" maxlength="14"><br><br> </div>
then you need to hide this divs :
.account_number{
display: none;
}
and when a radio button is checked you hide all divs and show the corresponding textfield :
$("input:radio[name=\'article\']").change(function() {
$(".account_number").hide();
if(this.value == '1' && this.checked){
$("#nmb").show();
}
else if(this.value == '2' && this.checked){
$("#nbc").show();
}
else if(this.value == '3' && this.checked){
$("#crdb").show();
}
});
https://jsfiddle.net/b8pdao6L/1/
Related
I need your help,
Is there a way one can possible use the all so powerful jQuery to validate the following conditions before enabling button?
If the user inputs a value in the text box and then checks one of the checkboxes, then enable the button
If the user already has a value present in the text, and then checks one of the checkboxes, then enable the button
How can this be written in jQuery, from my perspective this would some lenghty form field checking no?
Here's the HTML markup:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date3">
</body>
</html>
This might get you started. You can make the field validation as complex or simple as you wish.
$('input[type=checkbox]').click(function(){
var tmp = $(this).next('input').val();
//validate tmp, for example:
if (tmp.length > 1){
//alert('Text field has a value');
$('#mybutt').prop('disabled',false);
}else{
//alert('Please provide a long value in text field');
$('#mybutt').prop('disabled', true);
$(this).prop('checked',false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="mybutt" type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup"><input type="text" id="date3">
Try this way..
$('input').on('change input', function() {
$input = $('input');
$button = $('input[type="button"]');
var arr = [];
$input.each(function() {
if ($(this).attr('type') !== 'button') {
arr.push(check($(this)));
arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
}
})
})
function check(elem) {
if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
return false;
}
$('input').on('change input', function() {
$input = $('input');
$button = $('input[type="button"]');
var arr = [];
$input.each(function() {
if ($(this).attr('type') !== 'button') {
arr.push(check($(this)));
arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
}
})
})
function check(elem) {
if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date3">
I have a form that has series of checkboxes. When the other checkbox is selected an alert appears if you don't fill in the other textbox.
If I select more than one checkbox it doesn't validate at all?
<form>
<div id="form-2" class="pages active" data-page="form-2" style="display: block;">
<p>Please indicate below the quality issue(s) you were not happy with. Pick as many options as apply. <span class="required">*</span></p>
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="test">
<input type="checkbox" name="qual-form-2[]" value="Other, please specify in the box below">
<input type="text" name="qual-form-other-form-2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
<button class="next-page" data-page-id="form-2">Next</button>
</div>
</form>
<script>
if (pageCurrent.data('page') == 'form-2') {
var answer = pageCurrent.find('input[name="qual-form-2[]"]:checked').val();
if ( (answer == 'Other, please specify in the box below') && ($('input[name="qual-form-other-form-2"]').val().length > 0)) {
$('input[name="qual-form-other-form-2"]').removeClass('empty');
return true;
} else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0)) {
alert('Please specify other');
$('input[name="qual-form-other-form-2"]').addClass('empty');
return false;
} else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0) && ($('input[name="qual-form-2[]').is(":checked"))) {
alert('Please specify other');
$('input[name="qual-form-other-form-2"]').addClass('empty');
return false;
} else if ($('input[name="qual-form-2[]').is(":checked")) {
return true;
} else {
alert('Validation errors occurred. Please confirm the fields and submit it again.');
}
}
</script>
Try this : change your button type="button" and call below script.
$(function(){
$('.next-page').click(function(){
var checkCount = $('input[name="qual-form-2[]"]:checked').length;
//check atleast one checkbox checked
if(checkCount > 0)
{
var checkOther = $('input[name="qual-form-2[]"]:last');
var checkNotOther = $('input[name="qual-form-2[]"]:checked').not(checkOther);
//if 'other' and any of the rest is checked show alert
if(checkNotOther.length > 0 && checkOther.is(':checked'))
{
$('input[name="qual-form-other-form-2"]').addClass('empty');
alert('Please select either "Other" or another checkbox');
}
//if other checked and input is empty show alert
else if(checkOther.is(':checked') && $('input[name="qual-form-other-form-2"]').val() == "")
{
$('input[name="qual-form-other-form-2"]').addClass('empty');
alert('Please specify other');
}
else
{
alert('Validation Succeeded');
}
}
else
{
alert('Please check atleast one checkbox');
}
});
});
JSFiddle Demo
I´m working in a payment gateway where the user Name the Price for my digital books. An input box (to text the price) and a "Pay now" button are displayed. BUT:
If the price is less than 0.50 the payment button disapear and the download button appear
If the user introduce a "," instead a "." a box is displayed (please, enter a valid number)
Here is the form with the input box:
<form id="hikashop_paypal_form" name="hikashop_paypal_form" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="X" />
<input type="hidden" name="item_name_1" value="X" />
<input id="amount_1" name="amount_1" class="amount_1"/></form>
Pay Now button (it should be hiden if 1 is true)
<div id="PayNow" class="PayNow">
<input id="PayNow_button" type="submit" class="btn btn-primary" value="Pay now" name="" />
</div>
Download Now Button (it should be shown if 1 is true)
<div id="downloadNow" class="downloadNow">
Download now
</div>
Info box (It should be shown if 2 is true)
<div id="info" class="info">
Enter a valid number
</div>
And the question is: How can I do it?
I supose the solution passes by using javascript, but I don´t know how exactly... Thanks for you time...
I don´t know how, but it works for me:
Try it here: IBIZA! Book Download
<form id="pplaunch" action="https://www.paypal.com/cgi-bin/webscr" method="POST">
<input type="hidden" name="cmd" value="_xclick">
<input id="issueid" name="issueid" type="hidden" value="ARCHIVE NAME">
<input type="hidden" id="currency" name="currency" value="EUR">
<input type="hidden" name="business" value="YOUR PAYPAL ID" />
<input type="hidden" value="0" name="test_ipn"></input>
<input type="hidden" name="item_name" value="PRODUC NAME">
<input type="hidden" value="1" name="no_shipping"></input>
<input type="hidden" value="0" name="no_note"></input>
<input type="hidden" value="utf-8" name="charset"></input>
<input type="hidden" value="Super" name="first_name"></input>
<input type="hidden" value="http://www.YOURWEBSITE.com/return" name="return"></input>
<input type="hidden" value="http://www.OURWEBSITE.com/cancel" name="cancel_return"></input>
<div class="nameprice" style="float:left;margin-right:15px;>
<span style="font-size:small;">Name your price: </span><input id="amount" name="amount" size="6" maxlength="5" type="text"> <span style="font-size:small;color:#ccc;">From 0.00€</span>
</div>
<div id="pricerror"></div>
<div class="buttonspace">
<button id="buybutton" class="buybutton" type="button">Checkout</button>
<div id="descargaGratisMensaje"></div>
<div style="display: block;" class="pay">
</div>
</div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
function newPopup(url, width, height){
popupWindow = window.open(url,'_blank','height='+height+',width='+width+',left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
return false;
}
function displaybutton(displayclass){
if(displayclass == 'pay'){
$('.pay').css('display','block');
$('#pplaunch').attr('action', 'https://www.paypal.com/cgi-binwebscr');
$('#buybutton').html('Pagar');
}else{
$('.pay').css('display','none');
$('#pplaunch').attr('action', 'http://www.example.com/archive/'+$('#issueid').val());
$('#buybutton').html('Descargar');
$('#descargaGratisMensaje').html('Un Me Gusta podría ser un buen intercambio');
}
}
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n) && (n.search(/0x/i)<0);
}
function price(n){
// return null if n is not a price, or n rounded to 2 dec. places
if(!isNumber(n)){
// maybe the user entered a comma as a decimal separator
n = n.replace(/,/g,'.');
if(!isNumber(n)){
return null;
}
}
// now we know it is a number, round it up to 2 dec. places
return Math.round(parseFloat(n)*100)/100;
}
function pricecheck(){
var data = $.trim($('#amount').val());
var myprice = price(data);
if(myprice == null){
if(data == ''){
$('#pricerror').html('');
}else{
$('#pricerror').html('Please enter a price.');
}
displaybutton('pay');
return false;
}
if(myprice == 0){
$('#pricerror').html('');
displaybutton('nopay');
}else if(myprice < 0.5){
$('#pricerror').html('The minimum price is '+currencysymbol+'0.50.
Please enter either zero, or at least '+currencysymbol+'0.50.');
displaybutton('pay');
}else{
$('#pricerror').html('');
displaybutton('pay');
}
jQuery('.content').hide();
}
var currencysymbol = '$';
$.getScript('//www.geoplugin.ne/javascript.gp?ref=panelsyndicate.com', function() {
if(geoplugin_continentCode() != 'EU'){return;}
$('#currency').val('EUR');
currencysymbol = '€';
$('.currencysymbol').html(currencysymbol);
});
$(document).ready(function(){
var dialog = $('#modal').dialog({
title: 'IBIZA!'
, autoOpen: false
, closeText: ''
, modal: true
, resizable: false
, width: 500
});
$('#buybutton').click(function() {
$('#pplaunch').submit();
});
$('#pplaunch').submit(function() {
var myprice = price($.trim($('#amount').val()));
if((myprice != 0) && ((myprice == null) || (myprice < 0.5))){
$('#pricerror').html('Please enter your price.');
$('#amount').focus();
return false;
}
});
$('.modaltrigger').click(function() {
var issueid = $(this).attr('href').substr(1);
$('#issueid').val(issueid); // Comic ID
$('#include_a_message_to').html(issues[issueid].include_a_message_to); // Destinee of the message
dialog.dialog('option', 'title', issues[issueid].title); // Title of the comic
$('#issuelangs').html(issues[issueid].langs); // Languages in which the comic is available
dialog.dialog('option', 'position', { my: "center", at: "center", of: window });
dialog.dialog('open');
// prevent the default action, e.g., following a link
pricecheck();
return false;
});
$('#amount').bind('input propertychange', function() {
pricecheck();
});
$('.custommsg').hide();
$('.msgtrigger').click(function() {
var cmsg = $('.custommsg');
if(cmsg.is(':visible')){
cmsg.hide();
$('.sendmsg').show();
}else{
$('.sendmsg').hide();
cmsg.show();
$('.msgtxt').focus();
}
return false;
});
$('.msgtxt').keyup(function(){
if($(this).val().length > maxlength){
$(this).val($(this).val().substr(0, maxlength));
}
var remaining = maxlength - $(this).val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
var maxlength = 200;
var remaining = maxlength - $('.msgtxt').val().length;
$('#msgtxtnumcharsleft').text(remaining);
});
</script>
I've been working on this for weeks now and I can't seem to get the hang of this. I'm trying to show the hidden fields only when the previous fields are entered. Here's my example code:
HTML
<form>
<div id="group1">
<label>Field 1:</label>
<input type="text" class="field1" />
<br/>
<label>Field 2:</label>
<input type="text" class="field2" />
<br/>
<label>Field 3:</label>
<input type="text" class="field3" />
<br/>
</div>
<div id="group2">
<label>Field 4:</label>
<input type="text" class="field4" />
<br/>
<label>Field 5:</label>
<input type="text" class="field5" />
<br/>
<label>Field 6:</label>
<input type="text" class="field6" />
<br/>
</div>
<div id="group3">
<label>Field 7:</label>
<input type="text" class="field7" />
<br/>
<label>Field 8:</label>
<input type="text" class="field8" />
<br/>
<label>Field 9:</label>
<input type="text" class="field9" />
<br/>
<input type="submit" value="Submit">
</div>
</form>
CSS
#group2 {
visibility: hidden;
}
#group3 {
visibility: hidden;
}
Script
$(document).ready(function () {
$('#group1').find('input[type="text"]').keyup(function () {
CheckSubmit();
});
function CheckSubmit() {
var x = true;
$('#group1').find('input[type="text"]').keyup(function () {
if ($(this).val().length === 0) {
x = false;
return;
}
});
if (x) {
$('#group2').css('visibility', 'visible');
$('#group3').css('visibility', 'visible');
} else {
$('#group2').css('visibility', 'hidden');
$('#group3').css('visibility', 'hidden');
}
CheckSubmit();
});
I'm not sure what I'm doing wrong here. Can someone please assist?
I changed your code a bit. I stored the relevant selectors in variables, so you don't need to do a lot of re-querying every time something changes.
Here's the updated code:
JavaScript
var inputs = $('#group1').find('input[type="text"]');
var hidden = $('#group2, #group3');
inputs.keyup(function() {
var test = true;
inputs.each(function(key, value) {
if (!$(this).val().length) {
test = false;
return false;
}
});
hidden.css('visibility', ( test ? 'visible' : 'hidden' ) );
});
Demo
Try before buy
You can make this more dynamic by checking the inputs in the current div and if they all have a value, then show the next div (if there is one).
If they clear a value, then hide all the later divs.
$(document).ready(function() {
// you can restrict this to inputs in a specific div or just any input
$('#group1 input').on('keyup', function () {
var parentDiv = $(this).closest('div')
var hasValues = parentDiv.find('input').filter(function() {
return this.value == '';
}).length == 0;
if(hasValues) {
//parentDiv.next().css('visibility', 'visible'); // show just the next section
parentDiv.nextAll().css('visibility', 'visible'); // show all later sections
} else {
parentDiv.nextAll().css('visibility', 'hidden');
}
});
});
DEMO
I made a quick pen with a solution. It may not be the prettiest but it get's it done. Basically on every keyup event I check #group1's children for their value length and if they all have a length that's more than 0 I change a flag in an array. If all 3 flags are true I show #group2.
Here's the pen
$('#group2').hide();
$('#group3').hide();
$('#group1').keyup(function() {
var flags = {
0: false,
1: false,
2: false
}
$('#group1 > input').each(function(i, ele) {
if(ele.value.length !== 0)
{
flags[i] = true;
}
});
if(flags[0] && flags[1] && flags[2])
{
$('#group2').show();
}
});
$('#group2').keyup(function() {
var flags = {
0: false,
1: false,
2: false
}
$('#group2 > input').each(function(i, ele) {
if(ele.value.length !== 0)
{
flags[i] = true;
}
});
if(flags[0] && flags[1] && flags[2])
{
$('#group3').show();
}
});
Hope it helps :D
If I understand your question well, you want to show the fields in #group2/-3 if all the fields in the previous fields have a value. Using a few data-*-attributes (see MDN), you can create a handler like this (if you prefer: jsFiddle, containing a more complete example):
$('[data-nextgroup] [type=text]').on('keyup', function (e){
var fieldgroup = $(this.getAttribute('data-group'))
,fields = fieldgroup.find('[type=text]')
,canshow = fields.length ===
fields.filter( function (i,el) { return el.value.length; } ).length;
void( canshow && $(fieldgroup.attr('data-nextgroup')).fadeIn() );
});
[data-hidden] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="group1" data-nextgroup="#group2">
<label>Field 1:</label>
<input type="text" class="field1" data-group="#group1"/>
<br/>
<label>Field 2:</label>
<input type="text" class="field2" data-group="#group1"/>
<br/>
<label>Field 3:</label>
<input type="text" class="field3" data-group="#group1"/>
<br/>
</div>
<div id="group2" data-nextgroup="#group3" data-hidden>
<label>Field 4:</label>
<input type="text" class="field4" data-group="#group2"/>
<br/>
<label>Field 5:</label>
<input type="text" class="field5" data-group="#group2"/>
<br/>
<label>Field 6:</label>
<input type="text" class="field6" data-group="#group2"/>
<br/>
</div>
<div id="group3" data-groups data-hidden>
<label>Field 7:</label>
<input type="text" class="field7" />
<br/>
<label>Field 8:</label>
<input type="text" class="field8" />
<br/>
<label>Field 8:</label>
<input type="text" class="field9" />
<br/>
<input type="submit" value="Submit">
</div>
I have three radio buttons which are three options, on selecting, their sub-options will be displayed. The next button should be enabled when some text is entered in the currently selected option's sub-option text box. Entering all sub-options under an option is a must. So i want to enable the next button if values are entered in all text boxes under a selected option and are of some minimum defined length. How can i do this?
Here is the jsfiddle link: http://jsfiddle.net/yYJQY/2/
My code:
<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>
My Script:
$(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();
}
})
})
Any help is appreciated. Thank you!!
Try
$(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)
})
})
Demo: Fiddle