I'm making a form asking users about a tournament. I need to limit each placement to only having one team and vise versa. I have the latter figured out already. But I'm having trouble thinking of a way to further validate the radio buttons. The set is in a 4x4 grid and each column and row should only have one value. I can get the teams validation to work by naming the buttons the same but I can't find a way to validate the placement. I had a way to validate checkboxes but I need to use radio buttons so I can have what order users place each checked box so I can read what teams are placed in 1st and 2nd in each group.
The way the teams, placement, and button are laid out is within a table.
<form>
<table class="groupSeating" cellspacing="2">
<caption>Group Seating</caption>
<colgroup>
<col class="groups" />
<col class="teams" />
<col class="seating" span="4" />
</colgroup>
<tr>
<th rowspan="2" colspan="2"></th>
<th colspan="4">Seating</th>
</tr>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
<td>4th</td>
</tr>
<tr>
<td rowspan="4">Group A</td>
<td>ROX Tigers</td>
<td>
<input type="radio" name="roxSeed" id="ROX1" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX2" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX3" value="ROX" />
</td>
<td>
<input type="radio" name="roxSeed" id="ROX4" value="ROX" />
</td>
</tr>
<tr>
<td>G2 Esports</td>
<td>
<input type="radio" name="g2Seed" id="G21" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G22" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G23" value="G2" />
</td>
<td>
<input type="radio" name="g2Seed" id="G24" value="G2" />
</td>
</tr>
<tr>
<td>Counter Logic Gaming</td>
<td>
<input type="radio" name="clgSeed" id="CLG1" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG2" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG3" value="CLG" />
</td>
<td>
<input type="radio" name="clgSeed" id="CLG4" value="CLG" />
</td>
</tr>
<tr>
<td>Albux Nox Luna</td>
<td>
<input type="radio" name="anxSeed" id="ANX1" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX2" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX3" value="ANX" />
</td>
<td>
<input type="radio" name="anxSeed" id="ANX4" value="ANX" />
</td>
</tr>
</table>
</form>
There is probably a cleaner way for my code but I'm not worried about that, it's for a school project. I tried taking bits from another js that was for checkboxes but I can't think of what to change.
var limit = 2;
$('input.singleCheckbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
Is this what you're looking for?
https://jsfiddle.net/277uu501/2/
var reject = false;
$('input[type="radio"]')
.mouseup(function(){
var selectedValues = [];
$('input[type="radio"]:checked').each(function(){
selectedValues.push($(this).parent().index());
});
var selectedValue = $(this).parent().index();
reject = selectedValues.indexOf(selectedValue) != -1;
})
.change(function(){
if(reject) this.checked = false;
});
It seems I got the idea.
Try this JS code:
$('input').on('change', function() {
var initiator = $(this);
var value = initiator.val();
var counter = 0;
$('input:checked').each(function(i, elem) {
if (elem.value === value) {
counter++;
}
});
if (counter > 1) {
initiator.prop('checked', false);
}
});
It won't allow to check more than one radio button on the row/column
Related
I'm sorry, the title is awkward. Basically I'm using onclick() to show/hide different elements. When I click Radio1, it shows the element, but when I click Radio2 it doesn't hide Radio1's element, and vice versa. The only way I can think of doing it is doing a manual if statement, like so:
function RadioCheck(id) {
if (id == 'Radio1') {
document.getElementById(id).style.display = "table-row-group";
document.getElementById('Radio2').style.display = "none";
} else if (id == 'Radio2') {
document.getElementById(id).style.display = "table-row-group";
document.getElementById('Radio1').style.display = "none";
}
}
But when I have to do that for 5 radio buttons, it gets messy and gaudy. I'm not sure how to go about making it so the other elements will hide.
I've tried checking if the the radio with the corresponding is checked/unchecked, to hide/show it. But that doesn't work because obviously once you pass through another parameter, the previous one won't work
I've Googled and can't find it.
Edit: Here's the relevant HTML
Radio HTML
<tr>
<td>
<span class="label">Platform:</span>
</td>
<td>
<input type="radio" name="platform" onclick="RadioCheck('Radio1');">Radio1</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio2');">Radio2</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio3');">Radio3</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio4');">Radio4</input>
<input type="radio" name="platform" onclick="RadioCheck('Radio5');">Radio5</input>
</td>
</tr>
Radio1 HTML:
<tr id="Radio1">
<td>
<span class="label">Limited State:</span>
</td>
<td>
<input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
<input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
</td>
</tr>
Radio2 HTML:
<tbody id="Radio2">
<tr>
<td>
Locked to Sector?
</td>
<td>
<input type="radio" name="sectorLock" >Yes</input>
<input type="radio" name="sectorLock" >No</input>
</td>
</tr>
<tr>
<td>
<span class="label">Tech Alert</span>
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Alerts Portal
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Reason for Call
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
What exactly is not working?
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Describe specific web service
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
</tbody>
And I have my CSS to start the elements off hidden:
#Radio1 {
display: none;
}
#Radio2 {
display: none;
}
You can simply hide everything and then display one instead of adding logic to hide everything except the one that is about to be displayed.
function RadioCheck(id)
{
// Hide all
document.getElementById('Radio1').style.display = "none";
document.getElementById('Radio2').style.display = "none";
document.getElementById('Radio3').style.display = "none";
document.getElementById('Radio4').style.display = "none";
document.getElementById('Radio5').style.display = "none";
// Display one
document.getElementById(id).style.display = "table-row-group";
}
Here's a method that uses event listeners rather than inline onclick, also uses values for your radios to determine which TR's to show/hide. This example only has content for the first two radios but is extendable for as many as you want.
document.addEventListener('DOMContentLoaded', () => {
let radios = document.querySelectorAll('.tr-toggle-radios input[type=radio]')
let toggled = document.querySelectorAll('.tr-toggle-content')
radios.forEach(el => {
el.addEventListener('change', e => {
toggled.forEach(tog => tog.classList.add('hide'));
document.querySelector(`#${e.target.value}`).classList.remove('hide')
})
})
})
.hide {
display: none;
}
.tr-toggle-content {
display: table-row-group;
}
<table>
<tr>
<td>
<span class="label">Platform:</span>
</td>
<td class='tr-toggle-radios'>
<input type="radio" name="platform" value="Radio1">Radio1</input>
<input type="radio" name="platform" value="Radio2">Radio2</input>
<input type="radio" name="platform" value="Radio3">Radio3</input>
<input type="radio" name="platform" value="Radio4">Radio4</input>
<input type="radio" name="platform" value="Radio5">Radio5</input>
</td>
</tr>
<tr class='tr-toggle-content hide' id="Radio1">
<td>
<span class="label">Limited State:</span>
</td>
<td>
<input type="radio" value="Y" id="limStatY" name="limStat">Y</input>
<input type="radio" value="N" id="limStat" name="limStat" checked="true">N</input>
</td>
</tr>
<tbody class='tr-toggle-content hide' id="Radio2">
<tr>
<td>
Locked to Sector?
</td>
<td>
<input type="radio" name="sectorLock">Yes</input>
<input type="radio" name="sectorLock">No</input>
</td>
</tr>
<tr>
<td>
<span class="label">Tech Alert</span>
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Alerts Portal
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Reason for Call
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
What exactly is not working?
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
<tr>
<td>
Describe specific web service
</td>
<td>
<input type="text" style="width: 100%"></input>
</td>
</tr>
</tbody>
</table>
Try this: You keep an array of radio IDs and loop through them when a user interacts with a radio. Then you display the checked radio and hide all the others.
const radio = ['Radio1', 'Radio2', 'Radio3'];
function RadioCheck(id) {
radio.forEach((item) => {
if(id === item){
document.getElementById(id).style.display = "table-row-group";
}else{
document.getElementById(item).style.display = "none";
}
});
}
I have a table where it shows the list of deleted items.
User can either recover the item or delete permanently. i need help in making only one checkbox is checked in a table row and uncheck other checkbox when user try to check both. Also when checkbox is checked in table header, it should select all the checkboxes in that td.
$(function() {
$('input.example').on('change', function() {
$("tr").closest('input.example').not(this).prop('checked', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app>
<table>
<th>
<label>
<input type="checkbox" class="example" />Recover</label>
<label>
<input type="checkbox" class="example" />Delete</label>
</th>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="example" />
</td>
<td>
<input type="checkbox" class="example" />
</td>
</tr>
</table>
</div>
This is exactly the scenario where you should be using radio inputs, not checkboxes, as you get this behaviour by default without the need for any JS code. All you have to do is group the required input elements by their name attribute. Try this:
<div ng-app>
<table>
<th>
<label><input type="radio" name="foo1" />Recover</label>
</th>
<th>
<label><input type="radio" name="foo1" />Delete</label>
</th>
<tr>
<td>
<input type="radio" name="foo2" />
</td>
<td>
<input type="radio" name="foo2" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="foo3" />
</td>
<td>
<input type="radio" name="foo3" />
</td>
</tr>
</table>
</div>
i figured it out myself without using radio buttons and its working fine.
JS code
$scope.uncheckPermDelete = function (ip) {
if($("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=perm_delete_check_"+ ip.id +"]").prop('checked', false);
ip.perm_delete = 0;
}
};
$scope.uncheckRecover= function (ip) {
if($("input[name=recover_check_"+ ip.id +"]").prop('checked', true)) {
$("input[name=recover_check_"+ ip.id +"]").prop('checked', false);
ip.deleted = 1;
}
};
HTML code
<td ><input class="recover_check" name="recover_check_{{ip.id}}" ng-change="uncheckPermDelete(ip)" type="checkbox" ng-model="ip.deleted" ng-true-value="0" ng-false-value="1" /></td>
Basically when a user clicks submit in my MVC 3 application.
I want to use jquery to check if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row.
and is not display an alert mgs or validation error.
Rough code attempt:
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
In the above MultiSubBtn is the id on my Submit btn.
and the cell I am trying to query id a
Still learning when it comes to jquery , here is the full html page.
I removed some elements to reduce page size.
<div id="tabs-1" style="position:relative; left:-12%;">
#using (Html.BeginForm("SentMultipleCalsToCustomer", "CalibrationViewer", FormMethod.Post))
{
#* This is the table that contains a single page of the paginated table of recent calibrations *#
<table id="all-calibrations" class="grid tracker-grid" style="width:77%">
<colgroup>
<col class ="" style="width:11%">
<col class="workno-data" style="width:13%">
<col class="equipmentId-data" style="width:8%">
<col class="equipmentDesc-data" style="width:12%">
</colgroup>
<thead>
<tr>
#* ADDED 20/08/2014 *#
<th>Select</th>
<th>Work<br />No.</th>
<th>ID</th>
<th>Description</th>
#* the customer column is only shown for LTS users since customer only see 1 customers data *#
#if (this.User.IsInRole("LTS User Passive"))
{
<th style="width:15%;">Customer</th>
}
<th style="text-align: center; width:15%;">Cert</th>
</tr>
</thead>
<tbody>
#* iterate through each calibration shown on this page *#
#for (int index = 0; index < Model.Count(); index++)
{
#Html.HiddenFor(m => Model.ElementAt(index).CustomerName)
<tr>
#* The work number is a link to the calibration the work no. represents *#
<td><input type="checkbox" name="selectecals" value="#Model.ElementAt(index).Id"/></td>
<td>#Html.ActionLink("WN–" + #Html.DisplayFor(m => Model.ElementAt(index).Id), "Index", "CalibrationViewer", new { id = Model.ElementAt(index).Id }, null)</td>
<td>#Html.DisplayFor(m => Model.ElementAt(index).EquipmentID)</td>
<td>#Html.DisplayFor(m => Model.ElementAt(index).EquipmentDescription)</td>
#* once again only the lts user sees the customer column data *#
#if (this.User.IsInRole("LTS User Passive"))
{
<td>#Html.DisplayFor(m => Model.ElementAt(index).CustomerName)</td>
}
#* if the calibration has an attachment display the name of the file,
else display the Upload button*#
#if (Model.ElementAt(index).CertName != null)
{
<td style="background-color:#33CC00; color:#fff;">#Html.DisplayFor(m => Model.ElementAt(index).CertName)</td>
}
else
{ // style="background-color:#5C9CCC" // ----- to allow for btn
<td id ="attBtn" class="file-uploader-attachment-Class"></td>
}
</tr>
<script type="text/javascript">
var CUST_NAME = '#Model.ElementAt(index).CustomerName';
</script>
}
</tbody>
</table>
if (Model.Count() != 0)
{
<div id="calibrationViewer-rightColumn" style="display:inline-block; position:absolute; top:8.5%; left:80%; width:20%">
#{Html.RenderPartial("StatusForm", InstrumentTracker.Common.Enums.Status.Finished_Calibration);}
<input type="submit" style="width:100%;" class="styledbutton" id="MultiSubBtn" value="Submit" />
<input type="hidden" name="customer" value="#ViewBag.CustomerName" />
<br /> <br />
<button class="styledbutton" style="width:100%;" onclick="window.location.href='/Tracker/Index'">Return to Main Tracker Page</button>
</div>
}
} #*end using form tag*#
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#MultiSubBtn").click(function () {
if ((':checkbox').is(':checked') && ('td').find("attBtn").isempty())
alert("there is a cert missing");
});
function handleCheckbox() {
if ($(this).find(':checkbox').is(':checked')) {
$(this).find('.file-uploader-attachment-Class').removeClass("upload-placeholder-unchecked");
createUploader($(this));
$(this).find('.qq-upload-list').css("margin", "0px")
}
else {
$(this).find('.file-uploader-attachment-Class').addClass("upload-placeholder-unchecked");
$(this).find('.file-uploader-attachment-Class').html($('#myHTML2').html());
}
}
$('tr').each(handleCheckbox);
$('tr').on('click', handleCheckbox);
});
}
});
You stated your problem as "if any of the rows selected (selected via checkboxes) have any value in a particular cell in that row"
jsfiddle
This is a somewhat crude example, but see if this helps you any. It's a static table with input fields. If you enter data into column C and click the associated checkbox it finds the cell and changes the text color. If the cell is empty it changes the background color. Just to illustrate finding the cell and acting on its contents.
There are many ways (better ways than this no doubt) to do stuff like this, but the flow should be the same.
1) Find the checkboxes that are checked. var ch = $(":checked");
2) Iterate over collection of elements returned from your search ch.each(function () {}
a) determine what row you are currently looking at parentRow = $(this).closest('tr');(perhaps optional but that's how I do it)
b) find the cell in that row parentRow = $(this).closest('tr');and determine if it is "empty" based on your own criteria.
Personally, I don't hesitate to add classes data- elements or whatever is going to help me retrieve what I need later, so you'll note I added a class to that column's TD's as a convenience.
JQUERY
$(".checkbox").on("click", function () {
var ch = $(":checked");
var parentRow;
var cellInQuestion;
ch.each(function () {
parentRow = $(this).closest('tr');
cellInQuestion = $(parentRow).find(".C");
if (cellInQuestion.val() === "") {
cellInQuestion.css("background-color", "red");
} else {
cellInQuestion.css("color", "green");
}
});
});
HTML
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th style="color:green;">C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
<tr class="parentrow">
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="text" class="C" style="width:40px;" />
</td>
<td>
<input type="text" style="width:40px;" />
</td>
<td>
<input type="checkbox" class="checkbox" />
</td>
</tr>
</tbody>
</table>
I need to create a non repeated pair of values using option input types and jQuery. I'm doing in this way:
$(document).ready(function () {
var $modelBranch = {};
$("#create").on("click", function () {
var $model = $("#modeloBody").find("input[type='radio']:checked").val();
var $branch = $("#marcaBody").find("input[type='radio']:checked").val();
});
});
This is the HTML code where I'm applying the code:
<fieldset class="rpni-border">
<legend class="rpni-border">Model</legend>
<table id="contenedorModelos" style="" class="table table-condensed">
<tbody id="modeloBody">
<tr>
<td>
<input type="radio" value="1" id="selModelo1" name="selModelos">
</td>
<td>Harum.</td>
</tr>
<tr>
<td>
<input type="radio" value="4" id="selModelo4" name="selModelos">
</td>
<td>Pariatur ut.</td>
</tr>
<tr>
<td>
<input type="radio" value="6" id="selModelo6" name="selModelos">
</td>
<td>Tempore animi.</td>
</tr>
<tr>
<td>
<input type="radio" value="8" id="selModelo8" name="selModelos">
</td>
<td>Voluptatem.</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="rpni-border">
<legend class="rpni-border">Branch</legend>
<table id="contenedorMarcas" style="" class="table table-condensed">
<tbody id="marcaBody">
<tr>
<td>
<input type="radio" value="3" id="selMarca3" name="selMarcas">
</td>
<td>Ea in sequi.</td>
</tr>
<tr>
<td>
<input type="radio" value="7" id="selMarca7" name="selMarcas">
</td>
<td>Exercitationem.</td>
</tr>
<tr>
<td>
<input type="radio" value="11" id="selMarca11" name="selMarcas">
</td>
<td>Sit alias sit.</td>
</tr>
</tbody>
</table>
</fieldset>
<button id="create" type="button">Create</button>
<div id="ModelBranch"></div>
What I need to do is pick one option from Model, pick one option from Branch and on click event for the button create the pair and add the values for each option in key => value way to the $modelBranch vars so any time I add a new one first check if values are already added. Now, since UnderscoreJS is a nice library to work with array, objects and so on I'm planning to use it instead of use just jQuery and Javascript. So, how do I create the array with pairs like for example:
[
{
"model" => 1,
"branch" => 1
},
{
"model" => 2,
"branch" => 1
},
{
"model" => 2,
"branch" => 2
},
]
And then how I find if a pair already exists on that array so I will not add it to it again and stop code execution?
And how to add them to the array as I have think? Here is a Fiddle to play with
Have a look at
$(document).ready(function() {
var
//to check whether it is a duplicate, easier than checking by iteration
map = {},
//to store the result
array = [];
$("#create").on("click", function() {
var model = $("#modeloBody").find("input[name=selModelos]:checked").val();
var marca = $("#marcaBody").find("input[name=selMarcas]:checked").val();
//only if both options are selected
if (model && marca) {
var key = model + '-' + marca;
//only if the item is not present
if (!map[key]) {
//mark the combination as added
map[key] = true;
array.push({
model: model,
maca: marca
});
}
}
//print the result
$('#ModelBranch').html(JSON.stringify(array))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<fieldset class="rpni-border">
<legend class="rpni-border">Model</legend>
<table id="contenedorModelos" style="" class="table table-condensed">
<tbody id="modeloBody">
<tr>
<td>
<input type="radio" value="1" id="selModelo1" name="selModelos">
</td>
<td>Harum.</td>
</tr>
<tr>
<td>
<input type="radio" value="4" id="selModelo4" name="selModelos">
</td>
<td>Pariatur ut.</td>
</tr>
<tr>
<td>
<input type="radio" value="6" id="selModelo6" name="selModelos">
</td>
<td>Tempore animi.</td>
</tr>
<tr>
<td>
<input type="radio" value="8" id="selModelo8" name="selModelos">
</td>
<td>Voluptatem.</td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset class="rpni-border">
<legend class="rpni-border">Branch</legend>
<table id="contenedorMarcas" style="" class="table table-condensed">
<tbody id="marcaBody">
<tr>
<td>
<input type="radio" value="3" id="selMarca3" name="selMarcas">
</td>
<td>Ea in sequi.</td>
</tr>
<tr>
<td>
<input type="radio" value="7" id="selMarca7" name="selMarcas">
</td>
<td>Exercitationem.</td>
</tr>
<tr>
<td>
<input type="radio" value="11" id="selMarca11" name="selMarcas">
</td>
<td>Sit alias sit.</td>
</tr>
</tbody>
</table>
</fieldset>
<button id="create" type="button">Create</button>
<div id="ModelBranch"></div>
My function is
If I choose the first (second or last) option, the rest option will be disabled and reset as null and all values in the selected option will be enabled as my Javascript below.
Moreover, I would like to disable textboxs as the left-hand side below whenever the taxi option has been selected.
Demo
HTML:
<table>
<tr>
<td>
<input type="radio" name="vehicle" value="company_vehicle" />Company Vehicle</td>
</tr>
<tr class="set_width" id="company_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />Company Vehicle</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="hiring_vehicle" />Hiring Vehicle</td>
</tr>
<tr class="set_width" id="hiring_vehicle">
<td>
<input type="text" />
</td>
<td>
<input type="radio" name="abc" value="car" />Car</td>
<td>
<input type="radio" name="abc" value="bus" />Bus</td>
</tr>
<tr>
<td>
<input type="radio" name="vehicle" value="taxi" />Taxi</td>
</tr>
<tr class="set_width" id="taxi">
<td>
<input type="checkbox" />Taxi</td>
</tr>
</table>
Javascript:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
$('#' + valueSelected).find(':text').prop('disabled', false).val('').removeClass('readonly').closest('tr').siblings('tr.set_width').find(':text').prop('disabled', true).addClass('readonly');
$('#' + valueSelected).find(':checkbox,:radio').prop('disabled', false).closest('tr').siblings('tr.set_width').find(':checkbox,:radio').prop('disabled', true);
});
do like this:
$('input.rdo').click(function(){
if(this.id == 'rdoTaxi')
{
$('.textbox').prop('disabled',true);
}
else
{
$('.textbox').prop('disabled',false);
}
});
Fiddle DEMO
Using your current function, you can actually remove a lot of the current code and just do the following:
var rbt_vehicle = $("input[name=vehicle]");
$(rbt_vehicle).on('change', function (e) {
var valueSelected = this.value;
// your other code here ...
$('input[type="text"]').prop('disabled', valueSelected === 'taxi');
});
DEMO