Ich habe folgende Voraussetzung, bevor nächste div zu zeigen atleast 1 Checkbox oder Radio sollte überprüft werden muss ist. es ist getan, aber, wenn der Benutzer wählen Fenster ac & wählen Sie alle 4 Dienste, dann auf nxet-Taste sollte für alle Dienste auf Nein von Unist fragen. Zuletzt booknow Tastenanzeige. Wenn er 2 Dienste auswählt, fragt er keine Einheiten für beide ausgewählten Dienste. Wenn er beide Fenster & split ac & auswählt, dann wählt er keine der Einheiten für ausgewählte Dienste für beide Typfenster & split.Vor dem Anzeigen der nächsten div auf Click Check atleast 1 Checkbox sollte überprüft werden
Vielen Dank im Voraus.
Mein Code als
<div class="container quick-box-outer">
<div class="voffset-7">
<div class="col-md-12">
<div class="panel panel-warning first current" id="step1">
<div class="panel-heading">What we provide</div>
<div class="panel-body">
<ul class="services-list">
<li>Background checked and trained technicians</li>
<li>30 days service guarantee</li>
</ul>
</div>
<div class="panel-heading">Pricing</div>
<div class="panel-body">
<ul class="services-list">
<li>Fixed charges for installation, uninstallation and servicing</li>
<li>Charges for AC repairs will be quoted upon inspection</li>
<li>Rs.199 inspection charges if no service is availed post inspection</li>
</ul>
</div>
</div>
<div class="panel panel-warning" id="step2" style="display:none">
<div class="panel-heading">What do you need?</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<input type="checkbox" name="windowac" id="windowac" class="mychk">
<label for="windowac"> Window AC</label>
</div>
</div>
<div class="col-sm-12">
<div class="select-product last">
<input type="checkbox" id="splitac" name="fliptac" class="mychk">
<label for="splitac">Split AC</label>
</div>
</div>
</div>
</div>
<div class="panel panel-warning" id="step3" style="display:none">
<div class="panel-heading">What type of service do you want?</div>
<div class="panel-body">
<form id="step2">
<div class="col-sm-12">
<div class="select-product">
<input type="checkbox" name="wetservice" id="wetservice" class="mychk">
<label for="wetservice"> Wet Servicing (Jet pump service not included)</label>
</div>
<div class="select-product">
<input type="checkbox" name="dryservice" id="dryservice">
<label for="dryservice"> Dry Servicing</label>
</div>
<div class="select-product">
<input type="checkbox" name="gas" id="gas">
<label for="gas"> Gas Charging</label>
</div>
<div class="select-product last">
<input type="checkbox" name="other" id="other">
<label for="other"> Other repairs</label>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-warning last" id="step4" style="display:none">
<div class="panel-heading">How many ACs need Wet servicing?</div>
<div class="panel-body">
<form id="step2">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-warning last" id="step5" style="display:none">
<div class="panel-heading">How many ACs need Dry servicing?</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-warning last" id="step6" style="display:none">
<div class="panel-heading">How many ACs need Gas Charging</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-warning last" id="step7" style="display:none">
<div class="panel-heading">How many ACs need other reparing</div>
<div class="panel-body">
<div class="col-sm-12">
<div class="select-product">
<label for="1unit">
<span class="col-md-6"><input type="radio" name="units" id="1unit"> 1</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="2unit">
<span class="col-md-6"> <input type="radio" name="units" id="2unit"> 2</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="3unit">
<span class="col-md-6"><input type="radio" name="units" id="3unit"> 3</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product">
<label for="4unit">
<span class="col-md-6"><input type="radio" name="units" id="4unit"> 4</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
<div class="select-product last">
<label for="5unit">
<span class="col-md-6"><input type="radio" name="units" id="5unit"> 5</span>
<span class="col-md-6 text-right">Rs 500</span>
</label>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="col-md-6 col-sm-6 col-xs-6">
<button type="submit" class="btn btn-raised btn-warning" id="prev" style="display:none;">Back</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<a href="javascript:;" class="btn btn-raised btn-warning pull-right" id="next">Next</a>
<a href="javascript:;" class="btn btn-raised btn-warning pull-right" id="booknow" style="display:none;">Book Now</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#next').click(function() {
if ($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length) {
alert('Select one or more options to Continue')
return;
}
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').hide();
$('#booknow').show();
}
$('#prev').show();
});
$('#prev').click(function() {
$('#booknow').hide();
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').hide();
}
$('#next').show();
});
</script>
<script>
$('#booknow').click(function() {
if ($('.current').find(':checkbox,:radio').length > 0 && !$('.current :checked').length) {
alert('Select one or more options to Continue')
return;
}
window.location = "checkout.html"
});
</script>
Hallo Milind, je nach Länge überprüfen Sein für alle arbeiten "weiter" Tasten, aber es funktioniert nicht für "Jetzt buchen" -Schaltfläche – Vishaal
@Vishal: Sie müssen die Schaltfläche "Klick-Ereignis für Buch jetzt hinzufügen" hinzufügen. Führen Sie die Umleitung aus, wenn die obige Bedingung erfüllt ist. –
@Vishal: Da ist die Validierung für Button mit 'id = next' und nicht' id = "booknow" ' –