How to enable & disable a bootstrap tabs div?

Javascript & Ajax
#1

I have created 2 bootstrap tab within which there is a div separated by id. Initially I want the tab’s div to be disabled and another tab’s div enabled. When I click on the disabled tab’s div it must enable making the previous tab’s div disabled.
Can anyone please tell me where I am going wrong?

Below is the Javascript function

    function toggleTab() {
    		$("#oneway_tbl1").attr("disabled", "disabled").off('click');
    		var x1=$("#oneway_tbl1").hasClass("disabledDiv");		
    		(x1==true) ? $("#oneway_tbl1").removeClass("disabledDiv") : $("#oneway_tbl1").addClass("disabledDiv");
        
        toggleTab1(document.getElementById("oneway_tbl1"));
    } function toggleTab1(el) {
        try {
            el.disabled = el.disabled ? false : true;
        } catch (E) {}
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                toggleTab1(el.childNodes[x]);
            }
        }
    }

The html/table data

<select id='Select' name="trip_type">
<option value='outstation' name ="outstation">Outstation</option>
<option value='city' name ="city">City Local</option>
</select>
<br><br>
<div class="tab-content">
<div class="tab-pane active" id="outstation">Home content
<ul>
<li class="active">
<a href="#roundtrip_tbl1" onclick="toggleTab()">Round Trip</a>
</li>
<li>
<a href="#oneway_tbl1" onclick="toggleTab()">One Way</a>
</li>
</ul>

<div id="roundtrip_tbl1">
<table style="max-width:880px" border="1" bordercolor="#c1dde4" cellspacing="0" cellpadding="5" id="roundtrip_tbl_travel" >
<tr class="accombg">
<td colspan="4" align="center"><strong>Round City Local Travel</strong></td>
<td colspan="4" align="center"><strong>Date and Time </strong></td>

</tr>

<tr class="accombg">
<td align="center">Origin Location <span class="redtext">* </span ></td>
<td align="center">City Pick Up<span class="redtext">*</span><p><span class="accombgsmalltext"> (Pick up Point)</span></p></td>
<td style="min-width:50px;max-width:50px" align="center">Pick up Date<span class="redtext">*</span></td>
<td width="60" align="center">Pick Up Time</td>
<td align="center">Drop Off Loc <span class="redtext">*</span><p><span class="accombgsmalltext"> </span></p></td>                        
<td align="center">Drop Point <span class="redtext">*</span><p><span class="accombgsmalltext"> </span></p></td>
<tr class="sectionbg" id="jsTravelRoundDet">
<td>
<div>   
<input type="text" size="10" name="round_travel_det1[dep_rplace1][]" id="dep_rplace" readonly="readonly" value="<?php echo $emp_det['location']; ?>" class="jsTravelCls jsCityCls"/>
</div>
</td>

<td>
<input type="text"  name="round_travel_det1[dep_rcity1][]" id="dep_rcity" style="width:80px;"  class="jsTravelCls" />
</td>

<td>
<input style="min-width:80px;max-width:80px" type="text" name="round_travel_det1[dep_date][]" value="" id="assigned_date" class="assigned_date" />
</td>

<td>
<div>
<select name="round_travel_det1[time_zone3][]" style="max-width:50px"  class="jsTravelCls">
<?php
foreach ($time_zone as $tme_zone) {
echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
}
?>
</select>
</div>
</td>

<td>
<div>
<select name="round_travel_det1[arr_rplace1][]" style="width:110px;" onchange="showForm19(this.value, this, 'arr_rplace1');" id="arr_place" class="jsTravelCls jsCityCls">
<?php foreach ($city_list as $key => $value) { ?>
<?php if($label == '' || $value['group_name'] != $label) { ?>
<?php if($group) { ?>
</optgroup>
<?php } ?>
<optgroup label="<?php echo ($value['group_name'] == 'INDIA') ? 'DOMESTIC': $value['group_name']; ?>" class="grey">
<?php
$group ++;
$label = $value['group_name'];
} ?>
<option <?php echo (in_array($value['name'], $city_sens)) ? "style='color:red'" : ''; ?> value="<?php echo $key ?>" ><?php echo $value['name'] ?></option>
<?php } ?> 
<optgroup label="Others">
<option value="Others">Others</option>
</optgroup>
</select>
</div>
</td>

<td>
<input type="text" name="round_travel_det1[arr_rcity1][]" id="arr_rcity" style="width:80px;"  class="jsTravelCls"/>
</td>
</tr>
</table>

<table>
<tr>
<td>
<p id="addnew">
<a href="javascript:void(0)" class="addlinks" onclick="addTravelRow_2()"> + Insert Row </a> 
</p>
</td>

<td>
<p id="delrow_t" >
<a href="javascript:void(0)" class="addlinks" onclick="delIt('roundtrip_tbl_travel1')"> - Delete Row </a>
</p>
</td>
</tr>
</table>
</div> 

<div id="oneway_tbl1">
<table style="max-width:880px" border="1" bordercolor="#c1dde4" cellspacing="0" cellpadding="5" id="oneway_tbl_travel">
<tr class="accombg">
<td colspan="4" align="center"><strong>One Way Travel</strong></td>
<td colspan="4" align="center"><strong>Date and Time </strong></td>
</tr>

<tr class="accombg">
<td align="center">Origin Location <span class="redtext">* </span ></td>
<td align="center">City Pick Up<span class="redtext">*</span><p><span class="accombgsmalltext"> (Pick up Point)</span></p></td>
<td style="min-width:50px;max-width:50px" align="center">Pick up Date<span class="redtext">*</span></td>
<td width="60" align="center">Pick Up Time</td>
<td align="center">Drop Off Loc <span class="redtext">*</span><p><span class="accombgsmalltext"> </span></p></td>                        
<td align="center">Drop Point <span class="redtext">*</span><p><span class="accombgsmalltext"> </span></p></td>
</tr>

<tr class="sectionbg" id="jsTravelOneWayDet">
<td>
<div>
<input type="text" size="10" name="oneway_travel_det1[dep_oplace1][]" id="dep_place" readonly="readonly" value="<?php echo $emp_det['location']; ?>" class="jsTravelCls jsCityCls"/>
</div>
</td>

<td>
<input type="text" name="oneway_travel_det1[dep_ocity1][]" id="dep_city" style="width:80px;"  class="jsTravelCls" />
</td>

<td>
<input style="min-width:80px;max-width:80px" type="text" name="oneway_travel_det1[dep_date][]" value="" id="assigned_date" class="assigned_date" />
</td>

<td>
<div>
<select name="oneway_travel_det1[time_zone3][]" style="max-width:50px"  class="jsTravelCls"> 
<?php
foreach ($time_zone as $tme_zone) {
echo "<option value=\"" . $tme_zone . "\">" . $tme_zone . "</option>";
}
?>
</select>
</div>
</td>

<td>
<div>
<select name="oneway_travel_det1[arr_oplace1][]" style="width:110px;" onchange="showForm19(this.value, this, 'arr_oplace1');" id="arr_place" class="jsTravelCls jsCityCls">
<?php foreach ($city_list as $key => $value) { ?>
<?php if($label == '' || $value['group_name'] != $label) { ?>
<?php if($group) { ?>
</optgroup>
<?php } ?>
<optgroup label="<?php echo ($value['group_name'] == 'INDIA') ? 'DOMESTIC': $value['group_name']; ?>" class="grey">
<?php
$group ++;
$label = $value['group_name'];
} ?>
<option <?php echo (in_array($value['name'], $city_sens)) ? "style='color:red'" : ''; ?> value="<?php echo $key ?>" ><?php echo $value['name'] ?></option>
<?php } ?> 
<optgroup label="Others">
<option value="Others">Others</option>
</optgroup>
</select>
</div>
</td>

<td>
<input type="text"  name="oneway_travel_det1[arr_ocity1][]" id="arr_city" style="width:80px;" class="jsTravelCls"/>
</td>
</tr>
</table>
</div>
</div>
#2

Can anyone please help me with this? I am stuck badly

#3

trim down that HTML, to ONLY the required DOM elements… (tabs, inner divs…etc) no inner content…

its too hard to read all of that…(no formatting)

Do the ‘tabs’ (containers of these nested/child ‘divs’) have ID’s?

Do the inner divs you want to disable have ID’s? (I find it odd that the parent cotainer would be disabled, but the inner div would be enabled still?)

Will there me more than these 2 tabs ever? or are you just testing with 2?

Sponsor our Newsletter | Privacy Policy | Terms of Service