Disable input if checkbox checked

Disable input if checkbox checked - javascript

i want to disable inputs when a checbox is checked.
part of html:
<div class="span1 ">
<div class="control-group" id="niedziela">
<label class="control-label" for="">Niedziela</label>
<div class="controls">
<input type="text" value="<?= $metavalue->nightlife_open_7_start ?>" name="meta[nightlife_open_7_start]" id="nightlife_open_7_start" class="m-wrap span12 timepicker-24" placeholder="">
<input type="text" value="<?= $metavalue->nightlife_open_7_end ?>" name="meta[nightlife_open_7_end]" id="nightlife_open_7_end" class="m-wrap span12 timepicker-24" placeholder="">
<input id="klient_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_end,'do ostatniego klienta') ?> value="do ostatniego klienta" name="meta[nightlife_open_7_end]" class="m-wrap span12 timepicker" placeholder=""> Do ost. klienta
<input id="zamkniete_open_4_end" type="checkbox" <?=_ set_checked($metavalue->nightlife_open_7_start,'zamkniete') ?> value="zamkniete" name="meta[nightlife_open_7_start]" class="m-wrap span12 timepicker" placeholder=""> Zamknięte
</div>
</div>
</div>
what i want is that if checkbox with id klient_open_4_end is checked it should disable input with id="nightlife_open_7_end"
if checkbox with id="zamkniete_open_4_end" is checked should disable both inputs text areas
i tried with :
<script type="text/javascript">
$(document).ready(function($) {
$('#klient_open_4_end').change(function() {
$(this).find("#nightlife_open_7_start").attr("disabled", true);
});
});
</script>

You'll need to listen to the click event of the checkboxes. Since you've tagged the question with jQuery too,
$(function(){
$('#klient_open_4_end').on('click', function(){
if($(this).is(':checked')){
$('#nightlife_open_7_start').attr('disabled', true);
} else {
$('#nightlife_open_7_start').attr('disabled', false);
}
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
if($(this).is(':checked')){
$('.controls input:text, .controls textarea').attr('disabled', true);
} else {
$('.controls input:text, .controls textarea').attr('disabled', false);
}
});
});
Update
You can shorten this even more and use the following instead:
$(function(){
$('#klient_open_4_end').on('click', function(){
$('#nightlife_open_7_start').attr('disabled', $(this).is(':checked'));
});
$('#zamkniete_open_4_end').on('click', function(){
// assuming the textarea is inside <div class="controls /">
$('.controls input:text, .controls textarea').attr('disabled', $(this).is(':checked'));
});
});

This is fairly simple, you can do it like this
$(document).ready(function () {
$('#klient_open_4_end').click(function () {
$('#nightlife_open_7_start').prop('disabled', function(i, v) { return !v; });
});
});
But from your snippet I'm assuming you want to run something when the page loads to disable the input as well, you can do that the same way essentially.

You can achieve this as
$('#chk').change(function(){
if($(this).is(':checked'))
$('#inp1').prop('disabled','disabled')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' id='inp1' />
<input type='text' id='inp2' />
<input type='checkbox' id='chk' />

checkout this simple code
<html>
<body>
<input type="checkbox" id="klient_open_4_end" name="klient_open_4_end"/>
<input type="text" id="nightlife_open_7_end" name="nightlife_open_7_end"/>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#klient_open_4_end").change(function(){
if($(this).prop("checked")){
$("#nightlife_open_7_end").prop("disabled",true);
}
else{
$("#nightlife_open_7_end").prop("disabled",false);
}
});
});
</script>
</html>
In above code
$("#nightlife_open_7_end").prop("disabled",true/false);
you may use
$('#nightlife_open_7_end').attr('disabled', true/false);

It is for onclick disable and enable
<!DOCTYPE html>
<html>
<body>
Checkbox: <input type="checkbox" id="myCheck">
<button onclick="check()">Check Checkbox</button>
<button onclick="uncheck()">Uncheck Checkbox</button>
<script type="text/javascript">
function check() {
if(document.getElementById("myCheck").checked == true)
{
document.getElementById("input").disabled = true;
}
else{
document.getElementById("input").disabled = false;
}
}
</script>
</body>
</html>

Related

jquery validation to check status of 3 checkboxes are all checked then enable button

I have a form with some text fields, three checkboxes and a submit button.
Currently I have the submit button disabled and it should enable only if ALL three checkboxes are checked.
I have only been able to work out how to enable it with only one checkbox being checked.
How can I make sure all three are checked before enabling the button?
End of form
<input name="list1" id="list1" type="checkbox" value="" >
<input name="list2" id="list2" type="checkbox" value="" >
<input name="list3" id="list3" type="checkbox" value="" >
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">
Script
<script type="text/javascript">
$(function() {
$('#list1').click(function() {
if ($(this).is(':checked')) {
$('#pay-button').removeAttr('disabled');
} else {
$('#pay-button').attr('disabled', 'disabled');
}
});
});
</script>

Try
$(function () {
var $checks = $('#list1, #list2, #list3').change(function () {
$('#pay-button').prop('disabled', $checks.is(':not(:checked)'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input name="list1" id="list1" type="checkbox" value="" >
<input name="list2" id="list2" type="checkbox" value="" >
<input name="list3" id="list3" type="checkbox" value="" >
<input id="pay-button" type="image" disabled="disabled" src="//placehold.it/32/fff000" value="" name="save">
you can simplify the selector #list1, #list2, #list3 by adding a common class to those elements and then by using a class selector

You could try to compare the count of checked checkboxes and the total amount:
<div id="wrapper">
<input name="list1" id="list1" type="checkbox" value="" >
<input name="list2" id="list2" type="checkbox" value="" >
<input name="list3" id="list3" type="checkbox" value="" >
</div>
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">
Script
<script type="text/javascript">
$(function() {
$('#wrapper').on('click', 'input[type="checkbox"]', function() {
if ($('#wrapper').find(':checked').size() === $('#wrapper').find(':checkbox').size()) {
$('#pay-button').removeAttr('disabled');
} else {
$('#pay-button').attr('disabled', 'disabled');
}
});
});
</script>

edit code like below and try again:
HTML :
<input class="chck" name="list1" id="list1" type="checkbox" value="" >
<input class="chck" name="list2" id="list2" type="checkbox" value="" >
<input class="chck" name="list3" id="list3" type="checkbox" value="" >
<input id="pay-button" type="image" disabled="disabled" src="paypal.gif" value="" name="save">
JS :
<script type="text/javascript">
$(function() {
$('.chck').click(function() {
var isAllChecked = true;
for(var i = 0; i < $('.chck').length; i++)
{
if(!$('.chck')[i].is(':checked'))
isAllChecked = false;
}
if (isAllChecked) {
$('#pay-button').removeAttr('disabled');
} else {
$('#pay-button').attr('disabled', 'disabled');
}
});
});
</script>

Add a class name to your checkboxes i.e .checkboxes
$(".checkboxes").click(function () {
var blnEnableBtn = false;
var count = 0;
$('input:checked').each(function (index, element) {
count++;
});
if (count == 3)
$("#pay-button").removeAttr('disabled');
else
$("#pay-button").attr('disabled', 'disabled');
});
Hope it helps .

Show/hide div on radio button and change form action

<form action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db">
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">
<div id="a">Hi</div>
<div id="b">Hellow</div>
</form>
I have a form in which there are two radio buttons and two divs.If I selected radio button with id=one then div with id="a" shud be shown and other div will be hidden and form action will be one.php. and if I select radio button with id="two",div with id="b" will be shown and form action changes to "two.php"..How can this be done using jquery or javascript.Any help.

<form id="myForm" action ="one.php" method="post">
<input type="radio" name="cardType" id="one" class="css-checkbox" value="db" checked>
<input type="radio" name="cardType" id="two" class="css-checkbox" value="cc">
<div id="a">Hi</div>
<div id="b">Hellow</div>
</form>
css:
#b{
display:none;
}
Script
$(document).ready(function () {
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').show();
$('#b').hide();
$("#myForm").attr('action','one.php');
} else {
$('#a').hide();
$('#b').show();
$("#myForm").attr('action','two.php');
}
});
});
FIDDLE

try this
$('input[type=radio].css-checkbox').click(function(){
if (this.id=="one"){
$('div#a').show();
$('div#b').hide();
$('form').attr('action','one.php');
}
else {
$('div#a').hide();
$('div#b').show();
$('form').attr('action','two.php');
}
});
DEMO HERE

Try this
$(document).ready(function () {
$('div').hide()
$(".css-checkbox").click(function () {
if ($(this).attr('id') == "one") {
$('#a').fadeIn().siblings('div').fadeOut()
$("form").attr('action','one.php');
} else {
$('#b').fadeIn().siblings('div').fadeOut()
$("form").attr('action','two.php');
}
});
});
DEMO

Try this: jsfiddle
jQuery("[name='cardType']").click(function(){
var divs = $(this).parent().find(">div");
divs.hide();
if(this.id === 'one'){
$("#a").show();
}else{
$("#b").show();
}
});

$(function () {
$('input[name=cardType]').click(function () {
var id_checked = $('input[name=cardType]:radio:checked').attr('id');
if (id_checked == 'one') {
$('#a').show();
$('#b').hide();
} else if (id_checked == 'two') {
$('#a').hide();
$('#b').show();
}
$('form').attr('action', id_checked + '.php');
});
});

Javascript Hidden/Show data as input Radio

I created a code which displays an information by clicking on a RADIO and other information by clicking on another RADIO.
Works normally, but when I update the page, even CHECKED, shows no information. Then I have to click again on the RADIO that is already CHECKED information to appear.
Anyone know how to solve?
Follow the code below:
<script>
// COLOR BG OR IMG BG
$(document).ready(function(){
$("input[name$='userBgOrImg']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#"+test).show();
});
});
</script>
<style type="text/css">
.desc { display: none; }
</style>
<div><label><input type="radio" name="userBgOrImg" value="1" <?php $id = $res_select["id"]; if ( $userBgOrImg == 1 ) { echo "checked=\"checked\"";} else { echo "";}?>>Cor de Fundo</label></div>
<div><label><input type="radio" name="userBgOrImg" value="2" <?php $id = $res_select["id"]; if ( $userBgOrImg == 2 ) { echo "checked=\"checked\"";} else { echo "";}?>>Imagem de Fundo</label></div>
<div> <br /> <br /> </div>
<div id="1" class="desc">
<label for="userBgBody">Cor do fundo do Site</label>
<input type="text" class="form-control bscp span12" value="<?php $id = $res_select["id"]; echo $userBgBody; ?>" id="userBgBody" name="userBgBody">
<hr />
</div>
<div id="2" class="desc">
<label for="userImgBody">Imagem de fundo do site</label>
<input type="text" class="span12" name="userImgBody" id="userImgBody" placeholder="Imagem do fundo do site" value="<?php $id = $res_select["id"]; echo $userImgBody; ?>" />
<hr />
<label for="userImgBodyRepeat">Repetir imagem de fundo</label>
<span> <input type="radio" name="userImgBodyRepeat" value="repeat"> Sim</span> <span> <input type="radio" name="userImgBodyRepeat" value="no-repeat" selected="selected"> Não
<hr />
</div>
Thank you in advance for your help.

Try this,
$(document).ready(function(){
var did=$("input[name$='userBgOrImg']:checked").val();
if(did)
{
$("#"+did).show();
}
// your remaining code
});// document.ready function close
Demo

You need to try
$(document).ready(function(){
$("input[name$='userBgOrImg']").change(function() {
var test = $(this).val();
$("div.desc").hide();
if(this.checked) {
$("#"+test).show();
}
}).filter(':checked').change();
});

Tr this..
$(document).ready(function () {
$("input[name$='userBgOrImg']").click(function () {
var value = $(this).val();
if(value)
{
$("#"+value).show();
}
});

Show input based on selecting option

I have a script but I couldn't make it work correctly, I want to show inputs based on options, for example if I choose "Havale" option different inputs has to shown, if I choose "Paypal" option different inputs.
My codes are here;
<script type="text/javascript">
$(document).ready(function(){
$("input[name$='group_name']").click(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");
}
});
$(".box1").show();
$(".box2").hide();
});
</script>
and this;
<select name="payment_method" class="select2" onchange="this.form.submit();" style="width: 160px;">
<option value="">-- Ödeme şekli seçin --</option>
<option value="paypal">Paypal</option>
<option value="havale">Havale / EFT</option>
</select>
and this;
<div class="withdraw-center">
<div class="form-input-title box1">Banka Hesap Adı Soyadı</div>
<div class="form-input-area-bg3 box1">
<input type="text" id="payment_name" class="input3" name="payment_name" value="<?php echo $row['payment_name']; ?>" size="37" />
</div>
<div class="form-input-title">Banka Adı</div>
<div class="form-input-area-bg3">
<input type="text" id="payment_bank" class="input3" name="payment_bank" value="<?php echo $row['payment_bank']; ?>" size="37" />
</div>
<div class="form-input-title">IBAN</div>
<div class="form-input-area-bg3">
<input type="text" id="iban" class="input3" name="iban" value="<?php echo $row['iban']; ?>" size="37" maxlength="26" />
</div>
<div class="form-input-title">T.C. Kimlik No</div>
<div class="form-input-area-bg3">
<input type="text" id="tckn" class="input3" name="tckn" value="<?php echo $row['tckn']; ?>" size="37" maxlength="11" />
</div>
<div class="form-input-title box2">PayPal E-mail Adresi</div>
<div class="form-input-area-bg3 box2">
<input type="text" id="paypal_email" class="input3" name="paypal_email" value="<?php echo $row['paypal_email']; ?>" size="37" />
</div>
</div>
Thanks everyone!

You need to register the handler to the payment_method elements change event
$(document).ready(function(){
$("select[name='payment_method']").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".box2").css("display","block");
$(".box1").css("display","none");
}
});
$(".box1").show();
$(".box2").hide();
});
Demo: Fiddle

Try this
$(".box1").hide();
$(".box2").hide();
$("select[name='payment_method']").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".box2").show();
$(".box1").hide();
}
else if(option_value=='havale') {
$(".box1").show();
$(".box2").hide();
} else {
$(".box1").hide();
$(".box2").hide();
}
});
FIDDLE

You need to use the change event on the select box of the payment type.
Try this:
$(document).ready(function(){
$(".box1").hide();
$(".box2").hide();
$(".withdraw-center").hide();
$(".select2").change(function(){
var option_value = $(this).val();
if(option_value=='paypal') {
$(".withdraw-center").show();
$(".box1").css("display","block");
$(".box2").css("display","none");
}
else if(option_value=='havale') {
$(".withdraw-center").show();
$(".box2").css("display","block");
$(".box1").css("display","none");
}else{
$(".withdraw-center").hide();
}
});
Here is the fiddle:http://jsfiddle.net/ULUFe/1/

jquery each or custom checkbox question

I have a problem on the result and i'm already tired of solving.
HTML
<input type="checkbox" class="check" checked="checked" />
<input type="checkbox" class="check" />
JQUERY
$.fn.op_checkbox = function() {
$(this).hide();
$(this).wrap('<div class="op_checkbox"></div>');
$(this).parent().append('<div class="op_check_on_off"> </div>');
if($(this).is(':checked')) {
$('.op_check_on_off').addClass('op_check_on');
}
else {
$('.op_check_on_off').addClass('op_check_off');
}
}
$(document).ready(function() {
$('.check').op_checkbox();
});
Result
<div class="op_checkbox">
<input class="check" type="checkbox" checked="checked" style="display: none;">
<div class="op_check_on_off op_check_on"> </div>
</div>
<div class="op_checkbox">
<input class="check" type="checkbox" style="display: none;">
<div class="op_check_on_off op_check_on"> </div>
</div>
The result of first checkbox is copied in 2nd checkbox, the result should be:
<div class="op_checkbox">
<input class="check" type="checkbox" checked="checked" style="display: none;">
<div class="op_check_on_off op_check_on"> </div> <!-- on here -->
</div>
<div class="op_checkbox">
<input class="check" type="checkbox" style="display: none;">
<div class="op_check_on_off op_check_off"> </div> <!-- off here -->
</div>
What is the reason and problem of this? Thanks for your help

I think there are two problems currently in your code. Sangdol helped address the issue that comes with the scoping of $(this), and Shankar helped with the issue of your selector when you are adding the class. http://jsfiddle.net/rkw79/DZYFN/
$('.check').each( function() {
$(this).hide();
$(this).wrap('<div class="op_checkbox"></div>');
$(this).parent().append('<div class="op_check_on_off"> </div>');
if($(this).is(':checked')) {
$(this).parent().find('div').addClass('op_check_on');
}
else {
$(this).parent().find('div').addClass('op_check_off');
}
})

The this inside of function op_checkbox() is array-like jQuery object, so you should process each object with loop like this:
$.fn.op_checkbox = function() {
this.each(function(){
var $this = $(this);
$this.hide()
.wrap('<div class="op_checkbox"></div>')
.parent().append('<div class="op_check_on_off"> </div>');
if($this.is(':checked')) {
$this.parent().find('.op_check_on_off').addClass('op_check_on');
}
else {
$this.parent().find('.op_check_on_off').addClass('op_check_off');
}
});
}
$(document).ready(function() {
$('.check').op_checkbox();
});
And I refactored some code.
Inside of fn function, this is already jQuery object so you don't need to wrap like $(this).
Used jQuery chain.
Cached $(this). This can improve performance(though it's small improvement).

Try this
$.fn.op_checkbox = function() {
$(this).hide();
$(this).wrap('<div class="op_checkbox"></div>');
$(this).parent().append('<div class="op_check_on_off"> </div>');
if($(this).is(':checked')) {
$(this).parent().find('.op_check_on_off').addClass('op_check_on');
}
else {
$(this).parent().find('.op_check_on_off').addClass('op_check_off');
}
}
$(document).ready(function() {
$('.check').op_checkbox();
});

Develop Reference

JavaScript is the programming language of the Web.

Disable input if checkbox checked - javascript

Related

jquery validation to check status of 3 checkboxes are all checked then enable button

Show/hide div on radio button and change form action

Javascript Hidden/Show data as input Radio

Show input based on selecting option

jquery each or custom checkbox question

Categories

Resources