This question already has answers here:
How to disable all div content
(29 answers)
Closed 9 years ago.
I need to disable a DIV and all it's content using Javascript. I can swear that doing a simple
<div disabled="true">
was working for me before, but for some reason it no longer works. I don't understand why.
In IE10: the text "Click Me" is not greyed out and click handler still works.
I actually need this working for IE10. Below is my code.
<html>
<script>
function disableTest(){
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
nodes[i].disabled = true;
}
}
</script>
<body onload="disableTest();">
<div id="test">
<div onclick="alert('hello');">
Click Me
</div>
</div>
</body>
</html>
The following css statement disables click events
pointer-events:none;
Try this!
$("#test *").attr("disabled", "disabled").off('click');
I don't see you using jquery above, but you have it listed as a tag.
pure javascript no jQuery
function sah() {
$("#div2").attr("disabled", "disabled").off('click');
var x1=$("#div2").hasClass("disabledDiv");
(x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
sah1(document.getElementById("div1"));
}
function sah1(el) {
try {
el.disabled = el.disabled ? false : true;
} catch (E) {}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
sah1(el.childNodes[x]);
}
}
}
#div2{
padding:5px 10px;
background-color:#777;
width:150px;
margin-bottom:20px;
}
.disabledDiv {
pointer-events: none;
opacity: 0.4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
<div id="div2" onclick="alert('Hello')">Click me</div>
<input type="text" value="SAH Computer" />
<br />
<input type="button" value="SAH Computer" />
<br />
<input type="radio" name="sex" value="Male" />Male
<Br />
<input type="radio" name="sex" value="Female" />Female
<Br />
</div>
<Br />
<Br />
<input type="button" value="Click" onclick="sah()" />
I think inline scripts are hard to stop instead you can try with this:
<div id="test">
<div>Click Me</div>
</div>
and script:
$(function () {
$('#test').children().click(function(){
alert('hello');
});
$('#test').children().off('click');
});
CHEKOUT FIDDLE AND SEE IT HELPS
Read More about .off()
You can't use "disable" to disable a click event. I don't know how or if it worked in IE6-9, but it didn't work on Chrome, and it shouldn't work on IE10 like that.
You can disable the onclick event, too, by attaching an event that cancels:
;(function () {
function cancel () { return false; };
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
nodes[i].setAttribute('disabled', true);
nodes[i].onclick = cancel;
}
}());
Furthermore, setting "disabled" on a node directly doesn't necessarily add the attribute- using setAttribute does.
http://jsfiddle.net/2fPZu/
Related
I am attaching two events to 'document' - one for some checkboxes an one button. I thought that using the jquery .on() in combination with the relevant selectors would be sufficient.
[This fiddle][1] show the example code that 'freeze' as you select the button. The checkboxed are working OK. Can anyone explain why this is happening and how this should be done?
Html:
<div id="main">main..
<p>
<input type="checkbox" class="ui-checkbox" id="checkbox0" name="inkluderfil" value="filnavn">
<input type="checkbox" id="checkbox1" name="inkluderfil" value="filnavn">
<input type="checkbox" id="checkbox2" name="inkluderfil" value="filnavn">
<br>
<br>
</p>
</div>
<div id="buttdiv">
<input type="submit" name="mybutt" value="A submit button">
</div>
<div id='result'></div>
$('document').ready(function () {
$(document).on("change", 'input[name="inkluderfil"]', function (event) {
$('#result').html('Checkbox is changed')
});
$(document).on("click", 'input[name="mybutt"]', function (event) {
$('#result').html('mybutt is clicked')
for (var i = 0; 3; i++) {
console.log('objAttach2XML:' + i)
};
});
$('#result').html('ready')
});
Change
for (var i = 0; 3; i++) {
to
for (var i = 0; i<3; i++) {
I want to hide and show div according to radio buttons value.
HTML code is,
<div id="share_to_others">
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type">
</div>
And jquery code that i tried is,
$("#share_to_others input[name='fx_sharepl_type']").click(function () {
alert("test");
});
$("#share_to_others input[name='fx_sharepl_type']").change(function () {
alert("test");
});
$("#fx_sharepl_type").change(function () {
alert("asdas");
});
$("input[name=fx_sharepl_type]:radio").change(function () {
alert("click fired");
});
$(document).on('change', 'input:radio[name=fx_sharepl_type"]', function (event) {
alert("click fired");
});
Many of them from jsfiddle working demo, But not working for me, i dont know why.
Am i doing anything wrong?
You have to give unique id to each radio button then after do like this way.
$("#r1, #r2, #r3").change(function () {
$(function() { // DOM loaded event handler
var show_duration = 0;
var content_33 = $("#content_33");
var content_22 = $("#content_22");
var content_11 = $("#content_11");
var bloc_radio_share = $("#share_to_others");
// Take an html element in parameter and show it
function show_content(content_id) {
content_id.show(show_duration);
}
// Take an html element in parameter and hide it
function hide_content(content_id) {
content_id.hide(0);
}
hide_content(content_22);
hide_content(content_11);
bloc_radio_share.change(function() {
var radio_checked_val = $('input[name=fx_sharepl_type]:checked', '#share_to_others').val();
if (radio_checked_val == 33) {
hide_content(content_22);
hide_content(content_11);
show_content(content_33);
}
else if (radio_checked_val == 22) {
hide_content(content_33);
hide_content(content_11);
show_content(content_22);
}
else { // case content == 11
hide_content(content_33);
hide_content(content_22);
show_content(content_11);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="share_to_others">
<label>
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type" checked />
33
</label>
<label>
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type" />
22
</label>
<label>
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type" />
11
</label>
</div>
<div id="content_33">
This div is displayed because of click on radio button 33
</div>
<div id="content_22">
Radio button 22 has been clicked so I appear
</div>
<div id="content_11">
If you click on radio button 11 you'll see me, like now
</div>
Here is an example of algorithm that fits your need. Logic may be not the best or the fastest but that is a begin.
Your code wors but you forgot to include a JQuery source version located to the left side of the JSFiddle window.
Selecting any version of JQuery will make your code work.
IE6,7,8 this code dose not working
anybody help me.
how can i fix it??
<script type="text/javascript">
function call (event) {
if (document.createEventObject) { // IE before version 9
var mouseclickEvent = document.createEventObject (window.event);
mouseclickEvent.button = 1; // left button is down
document.getElementById("test4").fireEvent ("onclick", mousedownEvent);
}
}
</script>
<body>
<button id="test" onmouseover="call (event);">call</button>
<input id="test3" type="file" onclick="alert(6)"/>
</body>
There're several problems in you code:
event and window.event is redundant (and, I'm not sure though, may cause error);
There's no element with id test4.
The following code has been tested on IE8 and IE6:
<script>
function call()
{
if(document.createEventObject)
{
var evt=document.createEventObject();
evt.button=1;
document.getElementById("test").fireEvent("onclick",evt);
}
}
</script>
<button type="button" onclick="call();">Fire</button>
<input type="text" id="test" onclick="alert(6);" />
I'm creating a survey-like page. I use three basic JavaScript functions, goNext(i) which hides a certain div tags and shows the next, goPrevious(i), which pretty much does the same but backwards, and answerExists(questionNumber) which checks if all radio buttons are checked. From the point I created answerExists(), goNext() and I suppose goPrevious() too, stopped responding. Maybe it's something to do with the onsubmit() function, but I can't figure it out. These are the JavaScript functions:
function goNext(i) {
document.getElementById("div" + i).style.display = 'none';
document.getElementById("div" + (i + 1)).style.display = 'block';
}
function goPrevious(i) {
document.getElementById("div" + i).style.display = 'none';
document.getElementById("div" + (i - 1)).style.display = 'block';
}
function checkAnswers(questions) {
var answers = new Array(questions);
for(var i = 1; i <= questions; i++){
answers[i-1] = false;
var radio = document.getElementsByClassName('Radio' + i);
for (var j=0; j < radio.length; j++) {
if(radio[j].checked == true)
alert(radio[j].value)answers[i-1] = true;
}
for (var i = 0; i < questions; i++){
if(answers[i] == false){
alert("Please answer all questions.");
return false;
}
}
return true;
}
And this is the HTML form:
<form id="content" action="getresults.jsp" method="post" onsubmit="return checkAnswers(2);">
<div id="div1" style="display: block;">
<strong>1. Question 1</strong><br><br>
<input id="radio1" class="radio1" name="radio1" onclick="if (this.__chk) this.checked = false" onmousedown="this.__chk = this.checked" type="radio" value="Answer1" />
Answer1<br><br><br><br>
<div class="auto-style1">
<input name="next" onclick="goNext(1);" type="button" value="Next" />
</div>
</div>
<div id="div2" style="display: none;">
<strong>2. Question 2</strong><br><br>
<input id="radio2" class="radio2" name="radio2" onclick="if (this.__chk) this.checked = false" onmousedown="this.__chk = this.checked" type="radio" value="Answer 2" />
Answer 2<br><br>
<input id="radio2" class="radio2" name="radio2" onclick="if (this.__chk) this.checked = false" onmousedown="this.__chk = this.checked" type="radio" value="dfgdgfdgf" />
dgfgddgf<br><br><br><br>
<div class="auto-style1">
<input name="previous" onclick="goPrevious(2);" type="button" value="Previous" />
<input name="submit" type="submit" value="Submit" />
</div>
</div>
</form>
It is actually all created dynamically, but still, it worked before I added the checkAnswers() function.
The problem is that you have syntax errors in your checkAnswers function, and the interpreter discards any scripts that contain syntax errors, so all your other functions get discarded, too.
These are the two syntax errors:
alert(radio[j].value)answers[i-1] = true; is not a valid statement. (I'm guessing that you intended to delete the alert(radio[j].value) part, but highlighted the wrong thing?)
You have more left-curly-braces { than right-curly-braces }.
Once you fix both of these issues, the script should at least run (though you may still have some debugging to do).
You are calling checkAnswers with a 2 as parameter and build an array with it. ????
The code below will show the mistake.
try{
//your code
}catch(er){
alert(er);
}
I like to answer you step by step....
1) Why do you really need to check whether answers for all questions are checked?
I asked you this because radio buttons will have selected an option by default... or you can make an "active" thing for a particular option... By doing this you really don't need to check whether all questions are answered... since by default one answer is selected...
2) The click event doesnt work because it seems you don't have any "id" for input tags "next","previous","submit"... Have separate id's for each and capture the click event of that particular tag by using jquery...
eg. Have an id for next <input id="next">
$("#next").click(function() {
//perform the action you need
}
Do this for all click events....
3) Finally... don't use input tags for elements you like to click... Try using button tags...
Hope it ll help you :)...
I understand that this question may get closed for being duplicate (sorry if it is), but in my particular case, there may be a different problem for the functionality not working as desired, then it was in other similar questions.
Suppose we have a markup:
<div>
<label for="IsRecurring">Is Recurring</label>
</div>
<div>
<input id="IsRecurring" name="IsRecurring" type="checkbox" value="true">
<input name="IsRecurring" type="hidden" value="false" />
</div>
<div id="schedulerTypesList" style="display:none">
<div>
<label for="ScheduleTypeId">Schedule</label>
</div>
<div class="editor-field">
<input type="hidden" name="ScheduleTypeId" id="ScheduleTypeId" value="" />
<ul id="ScheduleTypeIdlist" >
<li>Once a weel</li>
</ul>
</div>
</div>
And a JS attached in the document.ready event:
$(document).ready(function() {
$('#IsRecurring').click(function () {
var thisCheck = $(this);
if (thischeck.is(':checked'))
$('#schedulerTypesList').show();
}
else {
$('#schedulerTypesList').hide();
})
});
Demo in JSFiddle.
Why checkbox click event isn't toggling the display of a div?
A few issues !!
$(document).ready(function() {
$('#IsRecurring').click(function() {
var thisCheck = $(this);
if (thisCheck.is(':checked')) { // added this closing bracket
$('#schedulerTypesList').show();
}
else {
$('#schedulerTypesList').hide();
} // added this closing bracket
});
});
Missing bracket after the if and thischeck instead of thisCheck and added correct closing brackets. Working demo : http://jsfiddle.net/manseuk/4DqXv/18/