I want to disable a set of checkbox based on selection of one textbox and enable the disabled ones if the checkbox is unchecked.
In the code below. If someone checks the checkbox for project cost under change this parameter then checkbox for project cost under Generate simulated value for this param
should be disabled and all the checkboxes under change this parameter should be disabled except for checked one. Similarly this should be done each parameter like Project cost,avg hours,Project completion date, hourly rate etc.
One way i could think of was of on the click function disable each checkbox by the id. Is there a better way of doing it?
<table>
<tr>
<td></td>
<td></td>
<td>Change this parameter</td>
<td>Generate simulated value for this param</td>
</tr>
<tr>
<td>Project cost</td>
<td><input type ="text" id ="pc"/></td>
<td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>
</tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>
</tr>
<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>
</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>
</tr>
</table>
Thanks
Prady
If you use a naming convention for either your id or name attributes, you can probably use the various attribute substring selectors to select the checkboxes. For instance:
$(":checkbox[name^=foo]").attr("disabled", true);
...will disable all checkboxes whose name starts with "foo" (so, "foo1", "foo2", whatever). Or of course, you could use a class, etc.
You might be able to make that a bit more efficient if you can contain it to the table:
$("selector_for_table").find(":checkbox[name^=foo]").attr("disabled", true);
For instance, if you added a "checkboxTable" id to the table:
$("#checkboxTable").find(":checkbox[name^=foo]").attr("disabled", true);
More about attribute selectors:
jQuery docs
CSS3 docs (jQuery supports nearly all of CSS3, and then some)
Alternately, I can't quite tell from your question (you seem to mention checkboxes that aren't shown in the given markup), but if all of the checkboxes you want to act on are within the same table row as the one that was clicked, you can use traversal within the row to find the checkboxes to enable/disable.
For example, this change handler will disable all other checkboxes on the same table row as the one that fired the event:
$("selector_for_checkboxes").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox").not($this).attr("disabled", this.checked);
});
Live copy
This one will do the same thing, but skipping any checkboxes that are already checked:
$(":checkbox").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox:not(:checked)").not($this).attr("disabled", this.checked);
});
Live copy
Ok, so if #chkBox is checked then you want to disable all checkboxes with the class "change" and the one for "sim" on the same row.
$('#chkBox').click(function(){
var paramChangeBoxes = $('input:checkbox.change');
if ($(this).is(':checked')) {
paramChangeBoxes.attr('disabled', 'disabled');
$('#chkBox1').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#chkBox1').removeAttr('disabled');
}
});
Related
I have code in which a gridview in asp.net webforms spits out 3 checkboxes of which I would like to have Jquery easily traverse through the ID's and ONLY allow 1 checkbox per row to be checked.
They will Always have the same name just that the ending numbers will increase thus row 1 might not have a number, but then ending in 1 then ending in 2 , then they all end of 3 etc...
I could do this regretfully long way of writing a ton of javascript/jquery in which I check for each specific checkbox and those that end in 1, those cannot have any others ending with 1 to be checked, they have to be unchecked.
I was thinking about regex in which I check the beginning of the ID and then the end of the ID and making sense that per ID having "chkCtrl" AND ending with a unique number like "1" that the specific box being checked will uncheck the other "chkCtrl" ending in 1 . Thus Out1 , Y1 , N1
I'm sure that there IS a fast way to do this I just cannot seem to find an example of it.
Example
<table>
<tr>
<td>Out</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
<tr>
<td>
<input id="MainContent_chkCtrlOut1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlY1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
<td>
<input id="MainContent_chkCtrlN1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
</td>
</tr>
This can easily be done by writing a couple of lines of jquery. For example see the code below.
$('input:checkbox').click(function(){
$(this).closest('tr').find('input:checkbox').removeProp('checked');
$(this).prop('checked',true);
});
jsFiddle: https://jsfiddle.net/taleebanwar/a3qk0kc1/1/
Edit
As Tom Stickel has mentioned in the comments using removeProp is a bad idea. It may not work in jquery 2.*. Refer Tom Stickel's answer for a better way to do this.
The selected answer will work in older jquery, if you changed that selected answer jquery version to a new version the checkboxes do not work.
.removeProp is bad idea https://api.jquery.com/removeProp/
Taleeb was very close however, I would say to edit that one line.
$('input:checkbox').click(function () {
$(this).closest('tr').find('input:checkbox').prop('checked', false);
$(this).prop('checked', true);
});
I have a form with a jquery date select and radio buttons like below
<table>
<tr>
<td>
<input type="text" id="5506_datepick_1"></input>
</td>
<td>
<input id="5506_protocol_protocol_1" type="radio" value="protocol 1" name="5506[protocol]">pp1</input>
<input id="5506_protocol_protocol_2" type="radio" value="protocol 2" name="5506[protocol]">pp2</input>
</td>
</tr>
<tr>
<td>
<input type="text" id="5507_datepick_2"></input>
</td>
<td>
<input id="5507_protocol_protocol_1" type="radio" value="protocol 1" name="5507[protocol]">pp1</input>
<input id="5507_protocol_protocol_2" type="radio" value="protocol 2" name="5507[protocol]">pp2</input>
</td>
</tr>
</table>
Whenever someone selects both the inputs on each row(example: radio for 5506* and date picker for 5506*) I want to be able to trigger a function regardless of the select order.
I have tried the following (in Js Fiddle) but its useless.
Anyone have any ideas on how I can go about this unobtrusively.
Jsfiddle
Your input selector is using ^=, which matches the exact START of a value, yet your values don't start with that value. I suggest changing that to *= so it searches anywhere within the ID. Reference jQuery Docs
Second, you're forgetting a closing ' quote for that selector.
That fixes the selector issues for activation. Now you just need to trigger a common function to check if both Date and Radio (in the same line) have been filled out.
Fixed JSFiddle
This activates the checkProtocol() function when a date is selected and passes the input text element along to it.
$(this).datepicker({
onSelect: function() { checkProtocol( this ) }
});
This activates the checkProtocol() function when a radio button has been selected for that group and passes that element along as a parameter.
$("input[id*='protocol_protocol']").change( function() { checkProtocol(this) } );
I have got a table which has input fields in table rows. For example:
<table>
<tr>
<td><input type="text" id="input1[1]" name="input1[1]" /></td><td><input type="text" id="input2[1]" name="input2[1]" /></td>
</tr>
<tr>
<td><input type="text" id="input1[2]" name="input1[2]" /></td><td><input type="text" id="input2[2]" name="input2[2]" /></td>
</tr>
</table>
If we change or enter any value in input1, then it has to disable respective element of input2 of that row likewise if we enter any value in input2 it has to disable input1 elemnt of that row.
Can someone please help me in solving this. Thanks.
Edit:
Thanks for the answers. Can we make this condition based so that the other field don't disable on certain values.
This would disable other inputs in the same row when a value is added to an input
$('td input').on('input', function() {
$(this).closest('tr').find('input').not(this).prop('disabled', this.value.length)
});
FIDDLE
I am trying to enable and disable a field using Javascript, works fine on IE but does not work on Safari.
FIELDS
If yes is clicked, should enable free text below, else disabled.
<tr id="ContainerQ1266I1396">
<td>Ultrasound Used</td>
<td>
<input type="radio" name="Q1266I1396" id="Q1266I13960" onclick="">No</input>
<input type="radio" name="Q1266I1396" id="Q1266I13961" onclick="regft();">Yes</input>
</td>
</tr>
<tr id="ContainerQ1267I1276">
<td>fretext</td>
<td>
<input id="Q1267I1276" type="text"size="80" />
</td>
</tr>
JAVASCRIPT
function regft(){
var regf=document.getElementById("Q1266I13961");
document.getElementById("ContainerQ1267I1276").disabled=true;
if (regf.checked==true){
document.getElementById("ContainerQ1267I1276").disabled=false;
}
}
First off the radio buttons don't seem to be in the same group - if you want them to be mutually exclusive options (which is what radio buttons mostly get used for) you could give them the same "name" attribute. See this tutorial for example: http://www.w3schools.com/jsref/dom_obj_radio.asp
Second, I think you are setting the disabled property on the tr element instead of the input element. Try:
document.getElementById("Q1267I1276").disabled=false;
There is a list of check boxes in a table and i have assigned a unique key to value attribute of each checkbox. What should be the selector in YUI3 so that i can get a single checkbox object if I know its value.
Following is the sample of the structure:
<table id="mytable">
<tr>
<td><input type="checkbox" value="1" /></td><td>Apple store</td>
<td><input type="checkbox" value="2" /></td><td>Play store</td>
</tr>
</table>
Code required in the following format:
Y.one("#mytable input[type=checkbox,value=1]");
This must return the checkbox object for Apple Store but its not working.. any idea?
You need an attribute selector for each attribute you are trying to match. You can't combine the name/value pairs in a single attribute selector.
[type=checkbox][value=1]