JSFiddle - React, Tailwind, and code Playground
by deve frontend
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="flightResultOneway" class="list-result">
<h1>Depart</h1>
<div class="result-list">
<label class="item">
<input type="radio" name="depart">lion
</label>
<label class="item">
<input type="radio" name="depart">citi
</label>
</div>
</div>
<div id="flightResultReturn" class="list-result">
<h1>Return</h1>
<div class="result-list">
<label class="item">
<input type="radio" name="return">citi
</label>
<label class="item">
<input type="radio" name="return">lion
</label>
</div>
</div>
<div class="next-book">
<a href="#" id="book" class="btn btn-primary disabled">book</a>
</div>
JavaScript
$(document).ready(function() {
var departInput = $('#flightResultOneway input:radio');
var returnInput = $('#flightResultReturn input:radio');
$(departInput).click(function() {
$('#flightResultOneway input:not(:checked)').parent().addClass('hide');
$('#flightResultOneway input:checked').parent().removeClass('hide');
});
$(returnInput).click(function() {
$('#flightResultReturn input:not(:checked)').parent().addClass('hide');
$('#flightResultReturn input:checked').parent().removeClass('hide');
});
});
// BUTTON BOOK
$(document).on("change", "input[type='radio']", function(){
$("input[type='radio']").each(function(){
$("#book").attr("disabled", false);
if($(this).is(":checked") === false){
$("#book").attr("disabled", true);
}
});
});