Disabling html elements on button click event
Question
I am currently using Jquery to manipulate html elements. Currently I am only working with divs, a textarea and two buttons. For this question: I have an admin button id="adminControl" which I would like to fire a clickevent that will disable the textearea, button id="#appendText" and the div class="middle-side" . I try doing the previous through keeping a count on button click id="adminControl" but nothing is being disable. I am aware it is possible with input fields but would it be possible with a div? JSFIDDLE
Jquery
var clickCount = 0;
$('#adminControl1').click(function (e) {
clickCount ++;
if (clickCount == 1){
$( "#button" ).prop( "disabled", true );
$( "#divText" ).prop( "disabled", true );
$( "#adminControl1").value("Enable All");
} else {
$( "#button" ).prop( "disabled", false );
$( "#divText" ).prop( "disabled", false );
$( "#adminControl1").value("disable All");
clickCount --;
}
}
HTML
<textarea rows="4" cols="50" id="divText" placeholder="Enter Text Here!"></textarea>
<input type="button" id="appendText" value="Add Div with Text" /><br/>
<div>
<div class="middle-side empty">
<h2 class="placeholder-title hidden">Place Inside Here</h2>
</div>
</div>
<div id="adminArea">
<h3>Admin Area</h3>
<input type="button" id="adminControl1" value="Disable All" />
</div>
3 answers
solution1
1 ACCPTED 2014-08-28 19:14:10
Hey you had a few errors in there:
- .value() should be val()
- to toggle the enable and disable, use a mod count and don't decrement the counter
- remove the duplicate click on the disable button
- you forgot to close a parenthesis
- $("#button") should have been $("#appendText")
I updated your JSFiddle http://jsfiddle.net/hawaiianchimp/xdfq9hc3/2/
solution2
0 2014-08-28 18:58:13
You just need to check if one element is disabled and do the following:
$('#adminControl1').click(function (e) {
if(!$("#appendText").prop("disabled")){
$("#appendText, #divText, .middle-side empty").prop("disabled", true);
$("#adminControl1").val("Enable All");
}
else{
$("#appendText, #divText, .middle-side empty").prop("disabled", false);
$("#adminControl1").val("Disabled All");
}
});
solution3
0 2014-08-28 19:04:22
Use val() instead of value(). Here is working code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var clickCount = 0;
$().ready(function(e){
$('#adminControl1').click(function (e) {
var clickCount= parseInt($("#counter").val());
$("#counter").val(clickCount+1);
if (clickCount == 1){
$( "#button" ).prop( "disabled", true );
$( "#divText" ).prop( "disabled", true );
$( "#adminControl1").val("Enable All");
} else {
$( "#button" ).prop( "disabled", false );
$( "#divText" ).prop( "disabled", false );
$( "#adminControl1").val("disable All");
clickCount --;
}
})
})
</script>
<body>
<form>
<textarea rows="4" cols="50" id="divText" placeholder="Enter Text Here!"></textarea>
<input type="button" id="appendText" value="Add Div with Text" /><br/>
<input type="text" id="counter" value="1" /><br/>
<div>
<div class="middle-side empty">
<h2 class="placeholder-title hidden">Place Inside Here</h2>
</div>
</div>
<div id="adminArea">
<h3>Admin Area</h3>
<input type="button" id="adminControl1" value="Disable All" />
</div>
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.