Disable a textbox if checkbox is checked - javascript

I have an HTML table where there is a checbox and a textbox in everyrow. The idea here is every time a checkbox is checked, the textbox will be disabled. Here is the code:
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td><input type="text" class="textbox" /></td>
<td><input type="checkbox" class="Blocked" onclick="myFunction(this)"/></td>
</tr>
</table>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
function myFunction(chk) {
//disable the textbox here
}
</script>
Can you help me with this? Also, if I unchecked the checbox, I want my textbox to be enabled back. Thanks!!

Would something like below work for you?
$('.Blocked').change( function() {
var isChecked = this.checked;
if(isChecked) {
$(this).parents("tr:eq(0)").find(".textbox").prop("disabled",true);
} else {
$(this).parents("tr:eq(0)").find(".textbox").prop("disabled",false);
}
});
JSFiddle: http://jsfiddle.net/markwylde/LCWVS/6/
Compacted, it would look a little like:
$('.Blocked').change( function() {
$(this).parents("tr:eq(0)").find(".textbox").prop("disabled", this.checked);
});
JSFiddle: http://jsfiddle.net/markwylde/LCWVS/4/

Sticking with the inline event handler:
function myFunction(chk) {
$(chk).closest('tr').find('.textbox').prop('disabled', chk.checked);
}
The jQuery way:
$('.Blocked').change(function() {
$(this).closest('tr').find('.textbox').prop('disabled', this.checked);
});

Try:
function myFunction(chk) {
document.getElementsByClassName("textbox")[0].disabled = chk.checked;
}

<input type="text" name="dateFrom" id="t2" style="width:100px"/>
<input type="text" name="dateTo" id="text" style="width:100px"/>
<script>
$(document).ready(function () {
$('#check').change(function () {
$("#t2").attr("disabled", "disabled");
$("#text").attr("disabled", "disabled");
});
$('#check').click(function () {
if (!$(this).is(':checked')) {
$("#t2").removeAttr("disabled");
$("#text").removeAttr("disabled");
}
});
});
</script>

Try this it allows you to disable and enable a textbox, if you want to disable multiple textboxes change it to getElementsByClassName("textboxes") then give all your textfields that class name.
function disableElement()
{
textbox = document.getElementById("text");
if(textbox.disabled)
{
bunit.disabled=false;
}
else
{
bunit.disabled=true;
}
}
Then have a checkbox and a textfield with the the textfield called text
<input type="checkbox" name="check" onclick="disableElement();">
<input type="text" id="text">

Related

How to add / modify existing jquery functionality

I'm trying to disable/enable a button based on the checkbox, which I am unable to do. Here is the sample I worked on. For enabled and disabled, different buttons have to be used.
function toggleContinue() {
$(document).ready(function() {
$("#swpRequired").click(function() {
$("input,select").change(function() {
$("#disableContinue").attr("style", "display:inline-block");
$("#continueButton").attr("style", "display:none");
});
});
$("#swpRequired").click(function() {
$("input,select").change(function() {
$("#disableContinue").attr("style", "display:none");
$("#continueButton").attr("style", "display:inline-block;");
});
});
});
}
Try this. use prop method of jquery
function s()
{
if($("#a").prop('disabled')==false)
$("#a").prop('disabled','true')
else
$("#a").removeAttr('disabled')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" onchange="s()" id="b"/>enable
<input type="button" value="click" id="a">
You could use attr() to disable/enable the button based on checkbox's value:
$(document).ready(function() {
$("#swpRequired").click(function() {
$("#continueButton").attr("disabled", this.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="swpRequired" />
<button id="continueButton">continue</button>
You can use change event and take the help of disabled property of button.
Solution will be like:
$(document).on('change', "#checkbox", function()
{
if ($(this).prop("checked") == true)
{
$("#btn").prop('disabled',true)
}
else
{
$("#btn").prop('disabled',false)
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox"/>enable
<input type="button" value="click" id="btn">

Make Copied value is not changable or editable in javascript

I have a requirement in java script
When i have a value in one field that value is copied into another field.
Once the same value copied in another field, a button can be clicked that makes the copied value so it cannot be changed and not even editable.
For first one i have done.
<input type='text' id='field_1'></br>
<input type='text' id='field_2'> </br>
$(document).ready(function () {
$('#field_1').on('change', function (e) {
$('#field_2').val($('#field_1').val());
});
});
You can bind an click handler to your button that will unbind your first input using unbind(). It can also make the second input readonly using .prop("readonly",true); and can disable itself using 1.prop("disabled", true);`
Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field_1'></br>
<input type='text' id='field_2'> </br>
<input type='button' id='btnReadOnly' value="Make Readonly">
<script>
$(document).ready(function () {
$('#field_1').change(function (e) {
$('#field_2').val($('#field_1').val());
});
$('#btnReadOnly').click(function() {
$('#field_1').unbind();
$('#field_2').prop("readonly",true).css("background-color","#dddddd");
$('#btnReadOnly').prop("disabled", true);
});
});
</script>
You need to add readonly property to both your input fields on click of your button.
Like this :
$(document).ready(function () {
$("#not_editable").hide();
$('#field_1').on('change', function (e) {
$('#field_2').val($('#field_1').val());
if($(this).val()!='')
{
$("#not_editable").show();
}
});
$("#not_editable").click(function(){
$('#field_1').prop("readonly",true);
$('#field_2').prop("readonly",true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='field_1'></br>
<input type='text' id='field_2'> </br>
<button id="not_editable" type="button">Mark Un-editable</button>

Checkbox Check for yes command in javascript

I want to get done, When i try to checked checkbox, It will show popup. Then, there have a two option as "Yes" and "NO". When i click "yes" checkbox will checked and popup close. If i choose "NO" checkbox will unchecked and close popup.
Give me a help on this. Sample code here
Javascript
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
$("#txt").dialog({
close: function () {
$('#chkBox').prop('checked', false);
}
});
} else {
$("#txt").dialog('close');
}
});
});
HTML
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
<button>Yes</button>
<button>NO</button>
</div>
Live sample here :
http://jsfiddle.net/5vy1m233/37/
Please help. Thank you.
Try adding a buttons:{} object property instead of having two extra buttons in the markup. This setting will create buttons for you and in those buttons you can choose to check/uncheck the checkbox:
$(document).ready(function() {
$('#chkBox').click(function() {
var $chkBox = $('#chkBox'),
$txt = $('#txt');
$txt.dialog({
buttons: {
Yes: function() {
$chkBox.prop('checked', true); // check if Yes
$txt.dialog('close'); // and close the popup
},
No: function() {
$chkBox.prop('checked', false); // uncheck if No
$txt.dialog('close'); // and close the popup
}
}
});
});
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" />
<div id="txt" style="display: none;">
</div>
<input type="checkbox" id="chkBox" name="HelpCheckbox" value="Help" onClick="confirmation(this);"/>
function confirmation(obj) {
obj.checked ? confirm("You have chosen " + obj.value + " as your type \n If you have chosen the right type, Click Ok!") ? alert("You clicked ok") : obj.checked = false : "";
}
you just have to put id on those button and add function and run it with 'onlick'
html
<button onClick="btn_yes()">Yes</button>
<button onClick="btn_no()">NO</button>
js
function btn_yes(){
$("#txt").dialog('close');
document.getElementById("chkBox").checked = true;
}
function btn_no(obj){
$("#txt").dialog('close');
}
here jsfiddle
http://jsfiddle.net/5vy1m233/40/

Checkbox check first time not working, after second time, it is OK

I am trying to create a checkbox with label. When user click the label, it will check if checkbox checked. The first time, I click the label, the box is checked, but no alert action. After I click the second time, it start to function, alert action happen. What did I do wrong. I have tried to use individual ID. Click not working either.
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name).click(function(){
if ($('#'+id_name +'_checkbox').prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
<script type="text/javascript">
$('label').click(function() {
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
});
</script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Also be sure, you have included jQuery library:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
And in new version of jQuery you can use insted of this:
if ($('#'+ $(this).attr('id') + '_checkbox').prop('checked') === false) {
alert('Checked');
}
else {
alert('Unchecked');
}
This piece of code:
// Just be careful, its inverted. Because, when you click label to check checkbox, the checkbox is still unchecked, and after alert will be checked...
if ($('#'+ $(this).attr('id') + '_checkbox').is(':checked') {
alert('Unchecked');
}
else {
alert('Checked');
}
Workind DEMO here in jsFiddle
Simplify things, you don't need each loop:
$('label').click(function() {
name=this.id;
if ($('#'+name+'_checkbox').prop('checked')) {
alert('Checked');
}
else{
alert('unchecked');
}
});
Demo: http://jsfiddle.net/fqvajvo1/2/
Script running correctly, script checks prop, but on label click -> checkbox is really unchecked, property changing comes later.
So, maybe in your case reverse logic could help (if you need alerts at all):
http://jsfiddle.net/fqvajvo1/4/ :)
I always use .is(':checked').I find it way more reliable
<script type="text/javascript">
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+id_name +'_checkbox').change(function(){
if ($(this).is(':checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
</script>
your click id is not complete name,so add complete name and call $(this) property will be ok...
var elements = { "emo_lol": "1", "emo_cool": "2", "emo_cute": "3" };
jQuery.each( elements, function( id_name, num ) {
$('#'+ id_name+'_checkbox').click(function(){
if ($(this).prop('checked')) {
alert('Checked');
}else{
alert('unchecked');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="emo_checkbox" id="emo_lol_checkbox">
<label id="emo_lol" for="emo_lol_checkbox" >LOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cool_checkbox">
<label id="emo_cool" for="emo_cool_checkbox" >COOL !</label>
<input type="checkbox" name="emo_checkbox" id="emo_cute_checkbox">
<label id="emo_cute" for="emo_cute_checkbox" >CUTE !</label>
Use .on to work for all events and all clicks on jQuery
Mainly used for dynamic creating elements
$(document).on('click','selector',function(){
});
Use class names for best options for grouped elements

javascript get the value of checkbox if checked without button clicked

javascript get the value of checkbox if checked without button clicked
I am struck in the middle of project, please help..
how to get the check box value from the class name or from by name or by id through alert so that the particular value I can pass...
I am sorry to ask..I am new the jquery and javascript..
This is my HTML ...
<input type="checkbox" name='cbox' value="red" class="theClass"/>red
<input type="checkbox" name='cbox' value="green" class="theClass"/>green
<input type="checkbox" name='cbox' value="yer" class="theClass"/>yer
<input type="checkbox" name='cbox' value="asdasd" class="theClass"/>asdasd
<input type="checkbox" name='cbox' value="radgdfged" class="theClass"/>radgdfged
$(function(){
$('input[type=checkbox]').on('change', function() {
alert($(this).val());
console.log($(this).val());
});
});
I googled much ...but every where onclick the button than only will get all checkbox values..
I am getting the values using the onclick button ....but the thing is getting the value without using the button...
My concern is getting the value if checkbox is checked..
eg: if i checked red , i should get alert 'red'.....
jQuery:
$('input[type=checkbox]').on('change', function() {
console.log($(this).val());
});
Javascript:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
console.log(this.value);
});
}
EDIT:
If you want the value only if the checkbox is checked.
jQuery:
$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked'))
console.log($(this).val());
});
Javascript:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if(this.checked)
console.log(this.value);
});
}
jsfiddle DEMO
P.s. for jQyery put your code inside:
$(function() {
//code here
});
If you need to get all the checked checkboxes on change of checkboes, you can use:
$('.theClass').change(function(){
alert($('.theClass:checked').map(function(){return this.value}).get())
});
Working Demo
try:
<input type="checkbox" name='cbox' value="red" class="theClass" onchange="alert(this.value)"/>red
demo
EDIT:
<input type="checkbox" name='cbox' value="red" class="theClass" onchange="this.checked?alert(this.value):null"/>red
demo
EDIT
alert all checked input values:
$('input[type=checkbox]').on('change', function() {
if($(this).is(':checked')){
var values = [];
$.each($('input:checked'),function(index,input){
values.push(input.value);
});
alert(values.join(','));
}
});
demo
HTML
<input type="checkbox" name='cbox' value="red" class="theClass" checked/>
jQuery
$(function() {
$(":checkbox").each(function() {
alert($(this).val())
});
});
Javascript get the value of checkbox if checked without button clicked
This code is working fine.Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Values of Selected Checboxes</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=checkbox]").change( function() {
var values = [];
$.each($('input:checked'),function(index,input){
values.push(input.value);
});
alert(values.join(','));
var n = $( "input:checked" ).length;
alert(n);
});
});
</script>
</head>
<body>
<form id="booking_form">
<input type="checkbox" name="bType" id="bType" value="A,200"> Type A - USD200<br>
<input type="checkbox" name="bType" id="bType" value="B,150"> Type B - USD150<br>
<input type="checkbox" name="bType" id="bType" value="C,100"> Type C - USD100<br>
<input type="checkbox" name="bType" id="bType" value="D,50"> Type D - USD50<br>
</form>
</body>
</html>
Preeti Dua

Categories

Resources