We Keep Coding

How to disable all elements within a div using jquery

I have a div and when a checkbox is clicked I want to disable all the elements inside the div, including disabling the onClick of one of the elements. Here is the codepen: https://codepen.io/anon/pen/JVwMOq
HTML:
<input type="checkbox" onChange="checkMe(this)">
<div id="test">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
</span>
</div>
JS:
function checkMe(element){
if($(element).prop('checked') === true){
$('#test').prop('disabled', true).off("click");
}
else{
$('#test').prop('disabled', false).on("click");
}
}
Any advice? Thanks!

You can use this, disabled with CSS.
you can't add disabled on div, it's working with input, etc..
$('#clickCheckbox').change(function() {
if($(this).is(":checked")) {
$('#test').addClass('disable-button');
}else{
$('#test').removeClass('disable-button')
}
$('#clickCheckbox').val($(this).is(':checked'));
});
.disable-button {
pointer-events: none;
cursor: not-allowed;
text-decoration: none;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="clickCheckbox">
<div id="test">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
</span>
</div>

I have a working solution below.
I have added in an additional input field to check it works on multiple items.
I created an checking function to see if your item is checked.
const isChecked = (element) => document.getElementById(element.id).checked ? true : false
Then updated the likeMe function to pass in the current id and returned null if the checkbox is checked.
function likeMe(element) {
if (isChecked(element)) {
return null
} else {
console.log('Calling likeMe()');
}
}
Then I updated your checkMe function to pass in the current element and the targetdiv so this would be more reusable across other parts of your code.
function checkMe(element, targetDiv) {
const targetDivInput = `#${targetDiv} input`
const targetDivClassName = `.${targetDiv}`
if (isChecked(element)) {
$(targetDivInput).prop('disabled', true);
$(targetDivClassName).toggleClass('disabled')
} else {
$(targetDivInput).prop('disabled', false);
$(targetDivClassName).toggleClass('disabled')
}
}
Then made some small changes to the markup to pass in the ids into your functions
<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>
and added a disabled state to your css so the user wouldn't see the cursor.
#like{
cursor: pointer;
}
.disabled #like {
cursor: inherit;
}
This is the final result.
#like{
cursor: pointer;
}
.disabled #like {
cursor: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
const isChecked = (element) => document.getElementById(element.id).checked ? true : false
function likeMe(element) {
if (isChecked(element)) {
return null
} else {
console.log('Calling likeMe()');
}
}
function checkMe(element, targetDiv) {
const targetDivInput = `#${targetDiv} input`
const targetDivClassName = `.${targetDiv}`
if (isChecked(element)) {
$(targetDivInput).prop('disabled', true);
$(targetDivClassName).toggleClass('disabled')
} else {
$(targetDivInput).prop('disabled', false);
$(targetDivClassName).toggleClass('disabled')
}
}
</script>
<input id="textCheck" type="checkbox" onChange="checkMe(this,'test')">
<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>

Hide a field-set if Check Box is already checked and saved in database and if not checked then show the field-set

This my code
<div class="editor-label" style="width: 110px;">
<%: Html.LabelForEx(model => model.foo.f1) %>
</div>
<div class="editor-field" style="width: 60px; padding-top: 0;">
<%: Html.CheckBoxFor(x => x.foo.f1) %>
</div>
I want to hide this div:
<div id = "newid"> </div>
using this script
$(function() {
$('#SecurityVulnerability_SecurityVulnerability').change(function() {
if ($(this).attr('checked')) {
$('#Security_AndroidPartnerBulletin').show();
} else {
$('#Security_AndroidPartnerBulletin').hide();
}
});
});
it's only working if checkbox is not already checked.
If check box is already checked then how can I write my JS.

Just trigger it
$(function() {
$('#SecurityVulnerability_SecurityVulnerability').on("change", function() {
$('#Security_AndroidPartnerBulletin').toggle(this.checked);
}).change();
});
#Security_AndroidPartnerBulletin { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="SecurityVulnerability_SecurityVulnerability" checked />
<div id="Security_AndroidPartnerBulletin">Hiddden at load time, shown if box checked</div>

show div and hide another div using checkbox

i need to hide div1 and show div2 when checkbox1 is checked
i have used below code but it didn't work
<script type="text/javascript">
function valueChanged() {
if ($('.checkbox1').is(":checked"))
$(".div2").show();
else
$(".div1").hide();
}
</script>
Html
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>

Instead you can just use toggle()
function valueChanged() {
$('.row').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" onchange="valueChanged()" />
<div class="row show" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>

If you want to keep it JS based your logic isn't quite right. Corrections below:
HTML Update:
<input id="checkbox1" type="checkbox" name="checkbox1" onchange="valueChanged()">
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none;">Show Div 2</div></div>
Javascript:
<script type="text/javascript">
function valueChanged() {
if ($("#checkbox1").is(":checked")) {
$("#div2").show();
$("#div1").hide();
} else {
$("#div1").show();
$("#div2").hide();
}
}
</script>
If you want to do it with just CSS instead add a class or id to the checkbox as well and use the ~ selector. You'll also want to remove the inline display none on the div2.
#div2 { display:none; }
#checkbox:checked ~ #div1 { display:none; }
#checkbox:checked ~ #div2 { display:block; }

You code is not correct. It should be like this:
function valueChanged() {
if ($('#checkbox1').is(":checked")) {
$("#div1").hide();
$("#div2").show();
} else {
$("#div1").show();
$("#div2").hide();
}
}
// OR you could just use toggle()
function valueChanged2() {
$('.row').toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1" onchange="valueChanged()" />
<div class="row" id="div1">Show Div 1</div>
<div class="row" id="div2" style="display: none">Show Div 2</div>

You use not correct access to elements
<script type="text/javascript">
function valueChanged() {
if ($(this).is(":checked"))
$("#div2").show();
else
$("#div1").hide();
}
</script>

how can i select item in a form, change the background and submit

I am trying to select one of the Item element, then change the background color to blue when selected (disable any other item from changing background color i.e. only one element can be selected) and then submit the form. I would only like to submit when one of the item is selected else alert.
$(document).ready(function(){
$('form').on('click', 'div', function(e) {
e.preventDefault();
$('#done').attr('disabled','disabled');
$('input').removeClass('bluebg');
$('div').removeClass('bluebg');
$(this).addClass('bluebg');
});
$('#ok').click(function() {
if($('div').hasClass('bluebg'))
{
document.location.href='page.aspx';
}
else { alert('Item is not selected');}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div id="item1">Item1</div>
<div id="item2">Item2</div>
<div id="item3">Item3</div>
<input type="button" value="OK" id="ok" />
</form>
Here's how output should look:

In order to run your example, I downloaded the jquery version that I am showing in the head and basically I applied 3 things:
1) Keep the id of the selected item with the variable selectedId.
2) Change your button input for a submit input and add the image with CSS.
3) Add a hidden input to store your selection.
<html>
<head>
<script src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
.bluebg {
background-color: blue;
}
.ok-button {
/* Change this for your image location */
background: url(OK.gif);
/* Adjust according to your image */
width: 20px;
height: 20px;
}
</style>
<script>
var selectedId = null;
$(document).ready(function() {
$('form').on('click', 'div', function(e) {
e.preventDefault();
$(this).addClass('bluebg');
if (selectedId != null) {
$('#' + selectedId).removeClass('bluebg');
}
selectedId = $(this).attr('id');
$('#myItem').val(selectedId);
});
$('#myForm').submit(function() {
if (selectedId != null) {
return true;
}
alert('Item is not selected');
return false
});
});
</script>
</head>
<body>
<form id="myForm" action="page.aspx" method="POST">
<div id="item1">Item1</div>
<div id="item2">Item2</div>
<div id="item3">Item3</div>
<input id="myItem" name="myItem" type="hidden" />
<input type="submit" class="ok-button" value="" />
</form>
</body>

your code works:
EDIT: my suggestion is to add an identifier to your form, and use more specific selectors, because with $('div').removeClass('bluebg'); you're removing the class from all of your divs inside the page.
$(document).ready(function(){
$('#myform').on('click', 'div', function(e){
e.preventDefault();
$('#done').attr('disabled','disabled');
$('#myform input').removeClass('bluebg');
$('#myform div').removeClass('bluebg');
$(this).addClass('bluebg');
});
$('#ok').click(function(){
if($('#myform div').hasClass('bluebg'))
{
document.location.href='page.aspx';
}
else { alert('Item is not selected');}
});
});
form div {
padding:10px 0;
}
.bluebg {
background:blue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<div id="item1">Item1</div>
<div id="item2">Item2</div>
<div id="item3">Item3</div>
<input type="image" src="OK.gif" id="ok" />
<form>

Jquery Div hide

I have a div tag which includes input controls. This div is opened when the user clicks on a menu item. I want to hide this tag when the click is outside that div area.
Currently I am able to hide the div when clicking outside it, but my div hides when I click any of the input controls that are in the div. How can I solve this?
My code is:
$(document).click(function (e) {
var elem = $(e.target).attr('id');
console.log(e.target);
if (elem !== 'btnLogin') {
// if (elem != 'TxtUserName' && elem != 'TxtPassword')
HideLoginDetails();
}
if (elem !== 'hpUseFul') {
// if(elem !== 'y')
}
});

Demo: http://jsfiddle.net/3fbpA/
var aboveDiv = false;
$('#yourDiv').click(function () {
aboveDiv = true;
});
$(document).click(function () {
if (!aboveDiv) $('#yourDiv').hide();
aboveDiv = false;
});

jQuery(document).ready(function()
{
$('the div you want').hover(function(){
mouse_inside=true;
}, function(){
mouse_inside=false;
});
$("body").mouseup(function(){
if(! mouse_inside) $('the div you want').hide();
});
});
Also check "Use jQuery to hide a DIV when the user clicks outside of it".

I have done complete bins for above issue. you can check demo link here...
Demo http://codebins.com/bin/4ldqp71
HTML
<div id="loginDialog">
<div class="field">
<label>
User Name:
</label>
<span class="input">
<input type="text" value="" id="txtuser" size="15"/>
</span>
</div>
<div class="field">
<label>
Password:
</label>
<span class="input">
<input type="password" value="" id="txtpassword" size="15"/>
</span>
</div>
<div class="field">
<input type="button" id="btn_ok" value="Login" />
</div>
</div>
<div>
<a href="javascript:void(0);" id="btnLogin">
Login
</a>
<a href="javascript:void(0);" id="btnMenu1">
Menu1
</a>
<a href="javascript:void(0);" id="btnMenu2">
Menu2
</a>
</div>
JQuery
$(function() {
$("#btnLogin").click(function() {
$("#loginDialog").show(500);
});
$(document).click(function(e) {
e.preventDefault();
var elem = $(e.target).attr('id');
if ($(e.target).parents("#loginDialog").length) {
$("#loginDialog").show();
} else {
if ($(e.target).attr('id') !== "btnLogin") {
$("#loginDialog").hide(300);
}
}
});
});
CSS
#loginDialog{
border:1px solid #333;
padding:4px;
background:#2A2A2A;
width:250px;
color:#dfdfdf;
display:none;
}
#loginDialog input{
border:1px solid #efefef;
}
#loginDialog input[type=button]{
background:#ababab;
}
#loginDialog input[type=button]:hover{
background:#cfcfcf;
}
#loginDialog .field{
text-align:center;
margin-bottom:5px;
}
#loginDialog label{
display:inline-block;
width:100px;
}
a{
display:inline-block;
margin-left:8px;
}
Demo http://codebins.com/bin/4ldqp71