I had an I Agree Checkbox that when checked or unchecked it used JS to toggle the Disabled setting on a button with id="submit1". However, I added more buttons and now it needs to toggle all of these buttons rather than just the first, so the ID isn't working anymore.
Current Code for checkbox:
<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="javascript: if(document.getElementById('agree').checked==true){document.getElementByID('submit1').disabled=false;}else{document.getElementByID('submit1').disabled=true;}">
And for button:
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
So, I have added more buttons, so I need 2 things:
I need JS or jquery that will loop through and toggle EACH button when the box is checked rather that just the single button (first button with the ID).
On page load, I also need it to check and see if the box is checked and if not, loop through and disable all of those buttons.
Thanks so much for any help you can give!!
Craig
HTML:
<input type="checkbox" checked id="agree" name="agree" value="ON">
<button onclick="do_file_form_submit(7);" id="submit1" name="submit1" class="custombutton">Button Number 1</button>
<button onclick="do_file_form_submit(7);" id="submit2" name="submit2" class="custombutton">Button Number 2</button>
jQuery:
$('#agree').change(function () {
if ($(this).is(":checked")) {
$('button').attr("disabled", false);
} else {
$('button').attr("disabled", true);
}
});
Here is the fiddle: http://jsfiddle.net/shahe_masoyan/UpxzB/3/
Check this out Your working page
function checkStatus() {
if ($('#agree_again').is(":checked")) {
$(".custombutton").attr('disabled', false);
}
else {
$(".custombutton").attr('disabled', true);
}
}
$("#agree_again").change(function () {
checkStatus();
});
You can call this checkStatus function on body load to check whether its checked or not on page load .
asign same classname for all button.
then use the class name for selector.
document.getElementByClassName("custombutton").disabled=false
Try this code. Hope this resolve your problem
$(function(){
//$("#agree").is(":checked")
EnableDisableButton(!$("#agree").is(":checked"))
$("#agree").click(function(){
EnableDisableButton(!$("#agree").is(":checked"));
})
function EnableDisableButton(isEnable){
$(".custombutton").attr("disabled",isEnable);
}
});
very simple
<input type="checkbox" checked="checked" id="agree" name="agree" value="ON"
class="agree_chk" />
<input type="button" class="button" id="button1" value="button1"/>
<input type="button" class="button" id="button1" value="button2"/>
<input type="button" class="button" id="button1" value="button3"/>
<input type="button" class="button" id="button1" value="button4"/>
and the javascript is
$(document).on('click','#agree',function() {
$('.button').attr({disabled:!$(this).is(':checked')})
});
js fiddle http://jsfiddle.net/5V2Y4/
try this code
<input type="checkbox" checked id="agree" name="agree" value="ON" onclick="change()">
<input type="button" id="button1">
<input type="button" id="button2">
<input type="button" id="button3">
<script>
$(document).ready(function() {
change();
});
function change() {
var i = 1;
for (i = 1; i <= 3; i++) {
var btnid = "button" + i;
if (document.getElementById("agree").checked) {
document.getElementById(btnid).disabled = false;
} else {
document.getElementById(btnid).disabled = true;
}
}
}
</script>
you can change the limit as the number of buttons changes
Related
I have a function where my button adds a table row every time you click it.
My target is, how can I display the value of my button click in my input type="number"? The value of my input type should be starting at "1", and every time when the button is clicked, increment by 1. Thank you in advance.
HTML:
<button type="button" id="clickCount" onClick="clickMe" value="click me"></button>
<input type="number" id="showMe" value="1"> // the value of my button clicks should be displayed here
Use this:
document.getElementById("clickCount").addEventListener("click", function() {
document.getElementById("showMe").value++;
})
<input type="number" id="showMe" value="1">
<button type="button" id="clickCount">Click Me</button>
<form>
<input type="text" id="clickCount" value="0"/>
<input type="button" onclick="incrementValue()" value="Increment Value" />
</form>
function incrementValue()
{
var value = parseInt(document.getElementById('clickCount').value, 10);
value = isNaN(value) ? 0 : value;
value++;
document.getElementById('clickCount').value = value;
}
You can increase the current value of the element on each click. I will also suggest you to avoid inline event handler.
Demo:
document.getElementById('clickCount').addEventListener('click', function(){
document.getElementById('showMe').value++;
});
//similarly you can decrease
document.getElementById('decrease').addEventListener('click', function(){
document.getElementById('showMe').value--;
});
<button type="button" id="clickCount" value="click me">+</button>
<input type="number" id="showMe" value="1">
<button type="button" id="decrease" value="click me">-</button>
Use this :
Click Me
const addNumber = document.getElementById("clickCount");
const showNum = document.getElementById("showMe");
addNumber.onclick = () => {
showNum.value++;
};
I need to uncheck a checkbox. It is doing everything like alert or removing div, but not unchecking the checkbox. I have used both attr and prop methods. The checkbox id is ok. Even it doesn't show any error in firebug console.
$('html').on('click', '#inScopeDiv .remButton', function () {
var currId = $(this).attr('id');
var chkBoxId = "#chk"+currId;
alert(currId);
alert('#chk'+currId);
$(chkBoxId).prop("checked", false);
$(chkBoxId).attr("checked", false);
$('#div'+ currId).remove();
$('#inScopeActionDiv' + currId).remove();
});
HTML provided ::
<c:forEach items="${data.inScope}" var="inScopeValues">
<div class="col-md-12" style="background-color: snow;">
<input class="inScope" type="checkbox" id="chk${inScopeValues.key}" name="chk + ${inScopeValues.key}" value="${inScopeValues.value}">
${inScopeValues.value}
</div>
</c:forEach>
Button & Checkbox is below ::>
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2">
<button id="chkisc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
The button you show in the updated question has id="chkisc_1", then in your function you take that and add #chk to the beginning of it which would mean you're looking for an element with the selector "#chkchkisc_1". Meanwhile, apparently the checkbox has id="chkisc_2", although it does seem to be created in a loop so perhaps there is also a _1 (though that would mean you have more than one element with the same id, which is invalid html).
Change the button to have id="isc_1", then when your JS adds #chk it will be looking for #chkisc_1:
$('html').on('click', '#inScopeDiv .remButton', function () {
var currId = $(this).attr('id');
var chkBoxId = "#chk"+currId;
$(chkBoxId).prop("checked", false);
$('#div'+ currId).remove();
$('#inScopeActionDiv' + currId).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="inScopeDiv">
<input class="inScope" type="checkbox" id="chkisc_1" name="chkisc_1" value="In Scope 1" checked>
<button id="isc_1" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
<input class="inScope" type="checkbox" id="chkisc_2" name="chkisc_2" value="In Scope 2" checked>
<button id="isc_2" type="button" class="btn btn-warning btn-sm remButton" title="Remove this item">Remove Item</button>
</div>
You should use prop() and removeAttr() to achieve this.. Hope it helps!
var cb = $("#checkbox")
$('#button1').click(function() {
cb.prop("checked", true)
})
$('#button2').click(function() {
cb.removeAttr('checked')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" />This is a checkbox
<br />
<br />
<button id="button1">Check checkbox</button>
<br />
<br />
<button id="button2">Uncheck checkbox</button>
let checkbox = document.querySelector("input");
checkbox.addEventListener("click",function(){
console.log("Sorry ( ͡° ͜ʖ ͡°)");
this.checked = false;
});
<input type="checkbox" />
i want to click a checkbox then the checkbox will be checked if i click again that will not be unchecked and if i take a button and click the button that checkbox can be unchecked
<HTML>
<HEAD>
<SCRIPT>
function readOnlyCheckBox() {
return false;
}
</SCRIPT>
<BODY>
<input type="checkbox" id="cbx1"
` onClick="return readOnlyCheckBox()" CHECKED /> readonly
<br/>
<input type="checkbox" id="cbx2"
CHECKED DISABLED/> disabled
</BODY>
</HTML>
this code does not satisfy my answerstrong text
Just do this by Jquery attr() and removeAttr() functions.
Html
<input type="checkbox" id="test">
<button class="btn">Uncheck</button>
Jquery
//for check
$("input").on("click", function() {
$(this).prop('checked', true).attr("readonly")
});
//for uncheck
$(".btn").on("click", function() {
$('input').prop('checked', false).removeAttr("readonly")
});
here is fiddle
You can have 2 functions like
function readOnlyCheckBox(el) {
return el.checked;
}
function uncheck() {
document.getElementById('cbx1').checked = false;
}
<input type="checkbox" id="cbx1" onClick="return readOnlyCheckBox(this)" CHECKED />readonly
<br/>
<button onclick="uncheck()">Uncheck</button>
I don't want to pass the value to the function, I want it to find the value itself.
<script type="text/javascript">
function add(buttonNum)
{
var elements = document.getElementsByTagName("button");
alert(document.myform.elements[buttonNum].value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(0)"/>
<input type="button" value="w" onclick="add(1)"/>
<input type="button" value="e" onclick="add(2)"/>
<input type="button" value="r" onclick="add(3)"/>
<input type="button" value="t" onclick="add(4)"/>
<input type="button" value="y" onclick="add(5)"/>
</form>
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
What approaches do I need to take? Something tells me that I need to get the length, run a for loop, and attach a handler. I'm just not sure on where to start.
simply pass this as parameter so that you can access all the attributes of the element but here only value:
<script type="text/javascript">
function add(elem)
{
alert(elem.value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(this)"/>
<input type="button" value="w" onclick="add(this)"/>
<input type="button" value="e" onclick="add(this)"/>
<input type="button" value="r" onclick="add(this)"/>
<input type="button" value="t" onclick="add(this)"/>
<input type="button" value="y" onclick="add(this)"/>
</form>
Compare:
getElementsByTagName("button");
<input>
You are getting the wrong element type.
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
Use addEventListener. You can identify the element clicked with event.target
e.g.
addEventListener('click', function (evt) {
if (evt.target.type == "button") {
alert(evt.target.value);
}
});
I am trying to check whether a radio button has been clicked on my page but for some strange reason it not acting the way I expect it to.
In my .js I have:
function radio_is_on() {
var elementId = document.getElementById('delete');
if (elementId.checked == "on" ){
alert('I am here');
}
}
In my html I have:
<input type="radio" id="some" name="radio1" value="someVal" >
<input type="radio" id="delete" name="radio2" value="delete" >
<input class=b1 type="submit" name="ok" value="Go" onclick="radio_is_on();">
Try this:
function radio_is_on() {
var elementId = document.getElementById('delete');
if (elementId.checked){
alert('I am here');
}
}
BTW: If you are not using the same name at least twice, you might want to use checkboxes.