Develop Reference

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">

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/

Doesn't set event on input when click button

I wrote function, which control input text. When I click button, in Input set value. In that time I need that function 'StartDate1.change' control change input value. So if this is value no equals 12/24/2013 -> clear field. But this is function doesn't work. Can you help me fix it?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="demo_form.asp">
Date: <input type="text" name="Phone" title="title1" value="">
<input id="target" class="ms-ButtonHeightWidth" type="button" accesskey="O"
value="Add date" >
</form>
<script type="text/javascript">
$(document).ready(function(){
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
});
var StartDate1=$('[title="title1"]');
StartDate1.change(function(event){//doesn't get here
window.setInterval(function(){
if($(event.target).val()==='12/24/2013')
{
//some code
}else
{
$(event.target).val('');
}
});
});
});
</script>
</body>
</html>
This is example on fidler:
Fiddle

If you need to control value in input field use keyup handler
http://jsfiddle.net/yPYDJ/5/

The onchange event only fires when the value changes and the input loses focus.
You can trigger it manually changing your code like this:
$( "#target" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.val('12/25/2013');
StartDate.change();
});

The function passed to window.setInterval is called repeatedly. So value set by the function on button click is reset immediately.
var timeFunction;
$( "#targetb" ).click(function() {
var StartDate=$('[title="title1"]');
StartDate.off('change');
StartDate.val('12/25/2013');
StartDate.on('change',function(event){
console.log("lol");
timeFunction=window.setInterval(clearInput,2000);
});
});
function clearInput(){
var StartDate=$('[title="title1"]');
if(StartDate.val()==='12/24/2013')
{
//some code
}else
{
StartDate.val('');
window.clearInterval(timeFunction);
}
}
I have created a new fiddle http://jsfiddle.net/yPYDJ/4/. Check this and accept it ifthis is what you expected.

Disable a textbox if checkbox is checked

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">

Show/Hide with Checkbox using jQuery

I am trying to have a section of an html form to show/hide based on a checkbox. This is the essence code I have:
<script src="/js/jquery.js"></script>
<script language="JavaScript">
function toggle(className){
var $input = $(this);
if($(this).prop('checked'))
$(className).show();
else
$(className).hide();
}
</script>
<fieldset><legend>Check Here
<input type="checkbox" onclick="toggle('.myClass')" ></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
When you click on the checkbox, the span gets hidden and will not come back. I have also used $(this).is(':checked'). It appears that $(this).prop('checked') is evaluating to false whether it is checked or not. My best guess is that I am using $(this) incorrectly. What am I missing here?

HTML, pass this from on click event
<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>
JS
function toggle(className, obj) {
var $input = $(obj);
if ($input.prop('checked')) $(className).hide();
else $(className).show();
}
OR, without using prop you can just do:
function toggle(className, obj) {
if ( obj.checked ) $(className).hide();
else $(className).show();
}
OR, in one-line using .toggle( display ):
function toggle(className, obj) {
$(className).toggle( !obj.checked )
}

Use an event handler that is'nt inline, and then just toggle() the element based on the checkbox state :
<script src="/js/jquery.js"></script>
<script type="text/javaScript">
$(function() {
$('input[type="checkbox"]').on('change', function() {
$(this).closest('fieldset').find('.myClass').toggle(!this.checked);
});
});
</script>
<fieldset>
<legend>Check Here<input type="checkbox"></legend>
<span class="myClass">
<p>This is the text.</p>
</span>
</fieldset>
FIDDLE
This would even work with several fieldset's with the same markup.

try binding event via jQuery, and then you can access to $(this):
$(document).ready(function() {
$(":checkbox").click(function(event) {
if ($(this).is(":checked"))
$(".myClass").show();
else
$(".myClass").hide();
});
});

<input type="checkbox" checked>
<input type="text" id="amount">
$document.ready(function() {
$("input:checked").on("click",function () {
$("#amount").toggle()
})
});