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.
Related
I have two check boxes (ON/OFF) that I want to make dependent in jQuery, this means that when I check the first (checkbox1) ON, the second (checkbox2) will automatically turn ON, i've tried this solution but it not works, can someone help me please.
//php
$cus_centre = $this->createElement('checkbox', 'checkbox1');
$cus_centre->setLabel($translate->_("Checkbox1"));
// ->setAttrib("disabled", "disabled");
$this->addElement($cus_centre);
$checkbox2 = $this->createElement('checkbox', 'checkbox2');
$checkbox2->setLabel($translate->_("Checkbox2"));
// ->setAttrib("disabled", "disabled");
$this->addElement($checkbox2);
//jQuery
$('#checkbox1').iphoneStyle({
onChange:function(){
if($("#checkbox1").is(':checked')){
$("#checkbox1").val(1);
$("#checkbox2").attr('checked', true);
$("#checkbox2").val(1);
}
}
});
My Checkboxes view
You can make it simply like this. Using $(this) inside the function (change listener) to check if the first checkbox is checked. If so, it will mark the second one.
$('#checkbox1').change(function() {
if(this.checked) {
$("#checkbox2").prop("checked", true);
}
});
You can try this.
$('#chkBox1').change(() => {
$('#chkBox2').prop('checked', $('#chkBox1').prop('checked'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="chkBox1" type="checkbox">
<input id="chkBox2" type="checkbox">
I'm trying to code a text field that is disabled when the check box is 'checked'.
Below is the code I'm using. I have no bloody idea why it's not working. I suspect it may be WordPress' fault but I'm new to Javascript so I'm hoping it's that.
<script type="text/javascript">
$('input[name=AddressCheck]').change(function(){
if($(this).is(':checked')) {
$("#dbltext").removeAttr('disabled');
}
else{
$("#dbltext").attr('disabled','disabled');
}
});
</script>
<input name="AddressCheck" type="checkbox" id="AddressCheck" /><br />
<input type="text" id="dbltext" disabled/>
$(document).ready(function(){
$('input[name=AddressCheck]').click(function(){
if($(this).is(':checked')) {
$("#dbltext").removeAttr('disabled');
}
});
the script runs before the browser sees the rest of the page, so the element is never found, so nothing gets bound
try
$(document).ready(init);
// or document.addEventListener('DOMContentLoaded', init);
function init(){
$('input[name=AddressCheck]').change(function(){
if($(this).is(':checked')) {
$("#dbltext").removeAttr('disabled');
}
else{
$("#dbltext").attr('disabled','disabled');
}
});
}
or move the script to the end of the body
<input type="radio" id="Svar0" name="Svar" value="Yes">
<input type="radio" id="Svar1" name="Svar" value="No">
<input type="radio" id="Svar2" name="Svar" value="MayBe">
User can choose only once.
As per requirement, if the user has selected a radio, he can not select another one. Means that if the user has answered YES (clicked on YES), then he can not change the answer to NO or MayBe.
Workarounds:
If I disable the radio after single click then it is not submitted to the server.
There is no option for readonly.
I tried onchange handler returning false, but it makes the user answer disappearing.
<script>
$('input[type = "radio"]').change(function () {
this.checked = false;
});
</script>
I am thinking of weird options like transparent div before radio buttons.
I do not want to prefer hidden fields as I have above 60 questions and I find it difficult to manage them.
Please help me any code in Jquery or Javascript.
If the user selects one answer in radio, then the page should not allow him to select another answer and so the first selected answer should be the one that gets submitted.
Another simple option (disable all, except selection, on selection of any). This allows the selected value to be posted back:
$(':radio').change(function(){
$(':radio').not(this).prop("disabled", true);
});
JSFiddle: http://jsfiddle.net/9n8v4heo/
Update (delay before disable):
It does not appear to be a good user experience to allow radio selection then freeze it immediately, as mistakes do happen.
The following example will allow a 2 second delay after any selection, before making them disabled, so you can keep clicking but after two seconds you cannot select again:
var tme;
$(':radio').change(function(){
var t = this;
clearTimeout(tme);
tme = setTimeout(function(){
$(':radio').not(t).prop("disabled", true);
}, 2000);
});
JSFiddle: http://jsfiddle.net/9n8v4heo/1/
try
$("[type=radio][name=Svar]").change(function () {
if (!$("[type=radio][name=Svar]").filter("[clicked]").length) {
$(this).attr("clicked", "true")
} else {
$(this).prop("checked", !this.checked);
$("[type=radio][name=Svar]").filter("[clicked]").prop("checked", true)
}
});
DEMO
use preventDefault() with click event as #JotaBe said
$("[type=radio][name=Svar]").click(function (e) {
if (!$("[type=radio][name=Svar]").filter("[clicked]").length) {
$(this).attr("clicked", "true")
} else {
e.preventDefault();
}
});
DEMO
You can disable the other buttons when one gets selected, this way the selected one will get sent when the form is submitted.
jQuery("input[name=Svar]").change(function() {
jQuery("input[name=Svar]").prop("disabled", "disabled");
jQuery(this).prop("disabled",false);
});
You can attach an event handler that disables the default action for the click to all the radios, and do whatever you need to do instead ofteh default action. Tod so so, attach a handler that simply includes a call to: event.preventDefault(), and your own code.
See jquery docs for event.preventDefault()
$(document).ready(function() {
var allowChoose = true;
$('input').click(function(e) {
if (allowChoose) {
allowChoose = false;
} else {
e.preventDefault();
}
});
});
As you can see, you can use a flag like 'allowChoose' to allow the default action on the first click, and then change the flag and avoid the default action (checking the radio) on the next calls.
See the fiddle here.
Quick solution: You can disable the others radio buttons and the selected value remains enabled.
var $Svars = $('input[name="Svar"]');
$Svars.change(function () {
$Svars.not(this).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="Svar0" name="Svar" value="Yes" /> Yes
<input type="radio" id="Svar1" name="Svar" value="No" /> No
<input type="radio" id="Svar2" name="Svar" value="MayBe" /> Maybe
Solution 2: Another solution will be to add a class or a data attribute to exclude the others, like below.
var $Svars = $('input[name="Svar"]');
$Svars.change(function () {
var $this = $(this);
if($this.val() == $this.data('selected') || $this.data('selected') == undefined) {
$Svars.data('selected', $this.val());
} else {
$Svars.val([$this.data('selected')]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="Svar0" name="Svar" value="Yes" /> Yes
<input type="radio" id="Svar1" name="Svar" value="No" /> No
<input type="radio" id="Svar2" name="Svar" value="MayBe" /> Maybe
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);
}
});
});
I have a checkbox which will toggle some other check boxes on a html form:
<input type="checkbox" name="selector" onclick="toggle_all(this);"/>
<script language="javascript">
function toggle_all(source) {
var checkboxes = $(":input[name^='form[r']");
if($(source).is(':checked')) {
checkboxes.attr('checked', 'checked');
} else {
checkboxes.removeAttr('checked');
}
alert('done');
}
</script>
First time I click the "selector" check box, all check boxes with names starting "form[r" will be checked. Then when "selector" check box is unchecked, all others are unchecked as well. Since then checking/unchecking "selector" checkbox doesn't affect other checkboxes. The code is running because alert('done') shows up. What's wrong here?
I would suggest an improvement. Change HTML, add some class to all your checkboxes:
<input class="check" type="checkbox" name="form[r]">
And JS:
function toggle_all(source) {
$(".check").prop('checked', source.checked);
}
http://jsfiddle.net/tFv3G/
And the reason why is that searching elements by its attributes much slower than by class name. And less readable as well.
You need to escape the square bracket in selector
Change
var checkboxes = $(":input[name^='form[r']");
To
var checkboxes = $(":input[name^='form\[r']");
I'd recomment using this code to select/deselect all checkboxes:
$('input#select-all').change(function(){
var checked = $(this).prop('checked');
$(":input[name^='form[r']").prop('checked', checked);
});