Develop Reference

Trigger functions from checkbox on click by clicking on a button

I have a couple of checkboxes and a button. When I click on checkbox - function is triggered. This is the desired behavior but I want to trigger it by clicking on the button. I want to have the possibility to first select checkboxes (I tried with return false and event.preventDefault but these completely switch the selection off) and then by clicking the button - trigger functions from checkboxes. Here is a link to jsfiddle:
http://jsfiddle.net/j93k2xns/6/
So for instance: I can select 3 checkboxes (nothing should happen) and after I click the button - three alerts should appear.
The code:
HTML:
<input type="checkbox" name='check[]' id="first">first</input>
<input type="checkbox" name='check[]'>second</input>
<input type="checkbox" name='check[]'>third</input>
<input type="checkbox" name='check[]'>fourth</input>
<input type="button" value="validate" id="val-button">
JS:
var check_state;
$(document).on('click','input[name="check[]"]', function(e){
if(check_state === true) {
alert('a');
} else {
return false;
}
});
$(document).on('click','#val-button', function(){
check_state = true;
});

There are a few interpretations to his question. If I'm reading it correctly, he wants to bind an arbitrary function to the checkboxes. Clicking the button should fire this event. This is how you can achieve that using custom events in jQuery:
$(function () {
$("input[name='check[]']").bind("myCustomButtonClick", function() {
if(this.checked) {
alert('a');
}
});
})
$(document).on('click','#val-button', function(){
$("input[name='check[]']").trigger("myCustomButtonClick");
});
And the associated jsfiddle: http://jsfiddle.net/3yf7ymos/

$(document).on('click','#val-button', function(){
$( 'input[name="check[]"]' ).each(function( index ) {
if($(this).is(':checked')) {
alert("a");
return true;
}
});
});

If you want to do something when the user checks a checkbox, add an event listener:
$('input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
// do something
}
});
If the idea is run a couple of functions after the inputs are checked by clicking on a button:
function myFunction() {
if ($('input[id="something"]:checked').length == 0) {
// do something
} else if ($('input[id="something_2"]:checked').length == 0) {
// do something
}
//and so on..
}
$('#val-button').click(function() {
myFunction();
});

I have a similar inquiry. I have a number of check boxes. Each checkbox is linked to a different URL that opens a PDF form. I want my team to be able to select which forms they need by ticking the checkbox. Once they have done that, I would like a button to trigger the opening of each form based on which check box is checked. I have it so the checkbox upon being checked opens the form right away but it is very distracting. Its preferable they all get opened at once by a "button". Help. I am quite new to JavaScript so may need additional clarity.

clear radio buttons when click on text input

I have a group of 4 radio buttons followed by a text input, when users click on the text input field I am trying to clear all radio inputs. here is my code so far.
<input type="radio" name="radio"><label for="radio1">1</label>
<input type="radio" name="radio"><label for="radio2">2</label>
<input type="radio" name="radio"><label for="radio3">3</label>
<input type="radio" name="radio"><label for="radio4">4</label>
<input type="text" id="textInput">
<script>
$('#textinput').click(function () {
radio.checked = false;
});
</script>

You can use .prop() to set checked property of input rabio buttons. Also you have misspelled textInput while event binding
<script>
$('#textInput').click(function () {
$('input[name="radio"]').prop("checked", false);
});
</script>
DEMO

<script>
$('#textInput').click(function () {
$('input[type=radio]').removeAttr("checked");
});
</script>

Or you can try attr() method
$('#textInput').click(function () {
$('input[name="radio"]').attr('checked',false);
});
DEMO

I think the best way to modify your script block (without changing your html) is first by ensuring that the code runs on document ready, and also you should probably ensure that the event is focus, not click, in case someone is using a keyboard or alternate navigation:
$(function() {
$('#textInput').focus(function () {
$('input[name=radio]').prop("checked", false);
});
});
Though it's probably more likely that you want to only clear other selections if they actually enter some data in that field, you might want to instead do:
$(function() {
$('#textInput').on('input', function () {
if($(this).val().length > 0) {
$('input[name=radio]').prop("checked", false);
}
});
});

javascript onload page radio checked

I have a function that enables or disables form elements based on which radio item is checked. It is working ok. However, I wish that one of the radio buttons to be checked at page load with the appropriate form elements already disabled or enabled.
Right now on page load, I have one of the radio buttons checked on the form itself but the javascript will fire when there is a change.
Here is the javascript
<script type="text/javascript">
function customerChoice() {
if (document.getElementById('radio1').checked) {
document.getElementById('company').disabled = false;
document.getElementById('onetime').disabled = true;
document.getElementById('span1').style.color = '#cccccc';
document.getElementById('span2').style.color = '#000000';
}
if (document.getElementById('radio2').checked) {
document.getElementById('company').disabled = true;
document.getElementById('onetime').disabled = false;
document.getElementById('span1').style.color = '#000000';
document.getElementById('span2').style.color = '#cccccc';
}
}
window.onload = customerChoice();
</script>
And here are the two radio buttons.
<input type="radio" name="type" id="radio1" value="C" onclick="customerChoice()" checked />Current Customer<br />
<input type="radio" name="type" id="radio2" value="O" onclick="customerChoice()" />One Time Customer<br />
Need help figuring out what to change in order to make the javascript fire upon loading. Thank you.

Try:
window.onload = customerChoice;
The way you have it runs the function immediately, and sets the onload handler to the result (which is undefined, since the function doesn't return anything), rather than to the function itself. It's not working because it runs before the DOM is loaded.

try putting the customerChoice() function inside an anonymous function:
window.onload = function() {
customerChoice();
};

How to prevent second click on radio button if it is already checked so that javascript event can be prevented

How to prevent second click on radio button if it is already checked so that javascript event can be prevented.
As I am doing many things onclick of radio button
<input name="EnumEvent" type="radio" value="Open" onclick="show_event()"/>
javascript
function show_event()
{
document.getElementById("radio-btns-div1").style.display="block";
document.getElementById('invited').style.display="none";
document.getElementById('invited').value = '';
document.getElementById('invite_1').value='';
}

You could use change event instead of click
<input name="EnumEvent" type="radio" value="Open" onchange="show_event()"/>
DEMO

Add the disabled attribute
function show_event()
{
document.getElementByName("EnumEvent").setAttribute("disabled", "disabled");
...
}
Don't forget to remove the attribute when/if you want the user to be allowed to select another option.

var clicked = false;
$('input:radio.yourclass').click(function(event){
if (clicked){
event.preventDefault();
}
clicked = true;
});

function Clicked() {
if (document.getElementById("radio-btns-div1").checked) {
document.getElementById("radio-btns-div1").disabled = true;
}
Refer to Disable radio button according to selected choice

checkbox property using jquery

i m a beginner.
i want that when a checkbox is checked then it should allow user to write something in a txtbox. initially the txtbox is disabled. what i should write inside the function using jquery

<input type="checkbox" id="cb" />
<label for="cb">label for checkbox</label>
<input type="text" id="txt" disabled="disabled" />
<script type="text/javascript">
$(document).ready(function() {
var checkbox = $('#cb');
var textfield = $('#txt');
checkbox.click(function() {
if (checkbox.is(':checked')) {
textfield.removeAttr('disabled');
}
else {
textfield.attr('disabled', 'disabled');
}
});
});
</script>
working example with visibilty
working example with disabled-state
additionally:
as you are working with asp.net, your assignments should look like, eg:
var checkbox = $('#<%= this.cb.ClientID %>');
you should be aware of the way how the server-controls get rendered either (to choose an appropriate selector).
furthermore: you should also be aware of the fact, that disabled-inputs won't get posted, whereas readonly-inputs are no problem to handle...

$('#mycheckbox').click(function()
{
$("#mytextbox").attr('disabled','');
}
);

$(document).ready(function()
{
//To Disable the Check box on page Load
$('#TextBox').attr('disabled', 'disabled');
//On Click of the Check Box
$('#CheckBoz').click(function()
{
if($('#CheckBoz').is(':checked'))
{
$('#TextBox').removeAttr('disabled');
}
else
{
$('#TextBox').attr('disabled', 'disabled');
}
});
});
I Hope this code works perfectly for you and u jst need to paste it in your page and check the Component name according to it.