I want to enable/disable an input type="number" but it never changes.
It starts disabled and when I press a input type="radio" I want to enable it.
<input type="number" class="form-control filtros_mapa_ruta" id="n_nodes_ruta" value="2" min="1" disabled>
I see a lot of people have this problem and they usually try with $('input').attr("disabled", true); but is failing too.
The jQuery function, using .prop("disabled", true):
$("#radio_ult_pos").on('click', function() {
if ($('#radio_ult_pos').is(':checked')) {
$( ".filtros_mapa_ruta" ).checkboxradio( "disable" );
$('#n_nodes_ruta').prop("disabled", true);
}
});
$("#radio_ruta").on('click', function() {
if ($('#radio_ruta').is(':checked')) {
$( ".filtros_mapa_ruta" ).checkboxradio( "enable" );
$('#n_nodes_ruta').prop("disabled", false);
}
});
Snippet (the checkbox here is not working because I'm using a jQuery UI widget, but they're working well in my code):
function checkboxController() {
$("#radio_ult_pos").on('click', function() {
if ($('#radio_ult_pos').is(':checked')) {
$(".filtros_mapa_ruta").checkboxradio("disable");
$('#n_nodes_ruta').prop("disabled", true);
}
});
$("#radio_ruta").on('click', function() {
if ($('#radio_ruta').is(':checked')) {
$(".filtros_mapa_ruta").checkboxradio("enable");
$('#n_nodes_ruta').prop("disabled", false);
}
});
}
$(document).ready(function() {
checkboxController();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-2" id="filter_container">
<!-- FILTROS-->
<legend>Filtros mapa: </legend>
<label for="radio_ult_pos">Última posición</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ult_pos" checked>
<label for="radio_ruta">Ruta</label>
<input type="radio" name="radio_select" class="filtros_mapa" id="radio_ruta">
<legend id="legend_filtro_datos">Filtros datos: </legend>
<label for="checkbox-2">Goat tracker 1</label>
<input type="checkbox" name="GOAT_TRACKER1" class="filtros_mapa filtros_mapa_ruta filtros_mapa_ruta_checkb optionNodeFilter" id="checkbox-2" disabled>
<label for="checkbox-3">Goat tracker 2</label>
<input type="checkbox" name="GOAT_TRACKER2" class="filtros_mapa filtros_mapa_ruta filtros_mapa_ruta_checkb optionNodeFilter" id="checkbox-3" disabled>
<label for="checkbox-4">Goat tracker 3</label>
<input type="checkbox" name="GOAT_TRACKER3" class="filtros_mapa filtros_mapa_ruta filtros_mapa_ruta_checkb optionNodeFilter" id="checkbox-4" disabled>
<input type="number" class="form-control filtros_mapa_ruta" id="n_nodes_ruta" value="2" min="1" disabled>
<button type="button" class="btn btn-success" id="filtrar_btn_map">Filtrar</button>
</div>
I tried with $('#n_nodes_ruta').removeAttr("disabled") but is not working too...
Why never change the attribute disabled?
In JS, you can set an event listener on the container div and if the radio buttons are clicked, you can set the disabled property on the input to true or false.
const input = document.getElementById("n_nodes_ruta");
function checkboxController() {
document.querySelector('.col-2').addEventListener('click', () => {
if(event.target.id === "radio_ult_pos") {
input.disabled = true;
}
else if(event.target.id === "radio_ruta") {
input.disabled = false;
}
})
}
$(document).ready(function() {
checkboxController();
});
As #Heretic Monkey said the problem was the jQuery function checkboxradio.
Yes, it was defined, but the problem was that the class filtros_mapa_ruta has the input as well, and that made him fail.
The solution was to call the right class, only with the checkbox.
$(".filtros_mapa_ruta_checkb" ).checkboxradio( "disable");
Thank you
you can simply use .attr('disabled', 'disabled') to make it disabled and .removeAttr('disabled') to enable it.
Related
I'm trying to make a form that will hide and show some parts of the form. It working correctly in some tries. But when the user chooses and checks an option with class badCheckbox which is showing badField subsequently then user checks option without class badCheckbox which should showing 'goodField' than 'badField' is not hiding and still is shown.
And when a user tries to check options separately all work correctly only in upper mentioned case.
Is there any way to do it?
//Script to hide and show div
$('.badCheckbox').change(function() {
let checked = 0;
$('.badCheckbox').each(function() {
if (this.checked) {
checked += 1;
}
});
if (checked != 0) {
$('#badField').show();
$('#goodField').hide();
} else {
$('#badField').hide();
$('#goodField').show();
}
});
//script to check only one of three
$(".oneChecked").on('click', function() {
// in the handler, 'this' refers to the box clicked on
var $box = $(this);
if ($box.is(":checked")) {
var group = "input:checkbox[name='" + $box.attr("name") + "']";
$(group).prop("checked", false);
$box.prop("checked", true);
} else {
$box.prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked" />
<div id="badField" style="display:none;">
<p>:((</p>
<input type="submit" />
</div>
<div id="goodField">
<p>NICE!!!</p>
<input type="submit" />
</div>
here is a short version
$('#checks').on('change', 'input[name="checkin"]', function (){
if( $(this).is(':checked') ){
$('#checks .oneChecked:checked').prop('checked', false);
$(this).prop('checked', true);
} else {
$('#checks .oneChecked:checked').prop('checked', false);
$(this).prop('checked', false);
}
if( $('#checks .badCheckbox:checked').is(':checked') ){
$('#badField').show();
$('#goodField').hide();
} else {
$('#badField').hide();
$('#goodField').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checks">
<input name="checkin" type="checkbox" class="oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="oneChecked"/>
</div>
<div id="badField" style="display:none;">
<p>:((</p>
<input type="submit"/>
</div>
<div id="goodField">
<p>NICE!!!</p>
<input type="submit"/>
</div>
Consider the following improvements.
$(function() {
function checkStuff(checked) {
if (checked) {
$('#badField').show();
$('#goodField').hide();
} else {
$('#badField').hide();
$('#goodField').show();
}
}
//script to check only one of three
$(".boxes").on('change', ".oneChecked", function() {
if ($(this).is(":checked")) {
$(".boxes input[type='checkbox']").prop("checked", false);
$(this).prop("checked", true);
checkStuff($(this).is(".badCheckbox"));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxes">
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked badCheckbox" />
<input name="checkin" type="checkbox" class="oneChecked" />
</div>
<div id="badField" style="display:none;">
<p>:((</p>
<input type="submit" />
</div>
<div id="goodField">
<p>NICE!!!</p>
<input type="submit" />
</div>
it's because you don't have an event when user click and the third checkbox.
Your function to show/hide message work when there are an update (change) on an input with the class .badCheckbox but when you click on the third (where doesn't have the class) your function is not called.
I think you should have a class on all your checkbox and use it in your function who lister the change.
Something like this :
$('.checkbox').change(function() {
let checked = 0;
$('.badCheckbox').each(function() {
// ...
});
And your html
<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked"/>
There is a lot of optimization that can be done to improve your code, like using the radio to remove your oneChecked function or printing the right message when the checkbox is checked instead of using show/hide two div but i think you should see it in the future
I hope this can help you and welcome to StackOverflow
First of all, obviously your checkboxes have to act like radios. As I understand, that is what you want to do. So, I modifyed your script a little bit to make checkboses to act as they are radio inputs, and in the same time to show/hide paragraph, depending on if clicked element has class badCheckbox and it's state (checkd or not). Here is the result:
//Script to hide and show div
$('.oneChecked').click( (everyOne) => {
//handles click (and change) on every element with class oneChecked
//they all has it in your example
$('.oneChecked').each( (ind, currentOne) => {
//iterate to all elements with class oneChecked
//and compare if matches clicked one
if ( !$(currentOne).is($(everyOne.target)) ) {
//other instance, not clisked one, so clear it
//to simulate behaviour of radio input
$(currentOne).prop('checked', false);
}
});
//checks if clicked element is bad or not and show/hide your p
if ($(everyOne.target).hasClass('badCheckbox') && $(everyOne.target).prop('checked')){
console.log('b-s/h');
$('#badField').show();
$('#goodField').hide();
} else {
console.log('s/b-h');
$('#badField').hide();
$('#goodField').show();
}
});
Here is an workign example in CodePen: https://codepen.io/kalatchev/pen/gOpJBOv
My form validator works, but it works in a certain order, if I check the checkbox, it works fine, but if I fill the inputs first and then use the checkbox, it not works, unless I type something in the inputs
$(document).ready(function() {
$('#send').attr('disabled', true);
$('.input,#check').on('keyup', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').attr('disabled', false);
} else {
$('#send').attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>
You only run your validation code during the keyup event, which only happens on the input boxes. You also need to do validation during a click event on the checkbox.
You can put multiple event names in the argument to .on(), to handle both with the same code.
You also have an incorrect class .input, there are no elements with class="input" in the HTML. I've changed it to .input-cpk.
$(document).ready(function() {
$('#send').prop('disabled', true);
$('.input-cpk,#check').on('keyup click', function() {
var text_value = $('.input-cpk').val();
if (text_value !== '' && (document.getElementById('check').checked)) {
$('#send').prop('disabled', false);
} else {
$('#send').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="block oh fr col-9 margem-d2 text-left" action="enviar-calculo.php" method="post" target="votar" name="cpk">
<input type="text" name="nome" id="nome" class="input-cpk col-20">
<input type="number" name="telefone" class="input-cpk-tel">
<input type="submit" value="CALCULAR" id="send" class="f-josefin-s-b f-branca bg-amarelo botao" onclick="output();">
<input type="checkbox" id="check" name="others" />
</form>
It's because you're using the wrong selector.
Try this
$('input,#check').on('keyup', function() {
Instead of this
$('.input,#check').on('keyup', function() {
Additionally you might want to use the .on('change') instead of .on('keyup')
This is my JavaScript
<script type="text/javascript">
$('#inputs input').change(function() {
if (this.checked) {
$span = $('<span></span>');
$span.text(this.value);
$('#results').append($span);
}
else {
$('span:contains('+this.value+')', '#results').remove();
}
});
</script>
This is my html
<div id="inputs">
<input type="checkbox" name="amount" value="50.00"></input>
<input type="checkbox" name="amount" value="20.00"></input>
<input type="checkbox" name="amount" value="15.00"></input>
<input type="checkbox" name="amount" value="10.00"></input>
<span>Total: $</span><span id="results"></span>
Since the checkboxes all have the same name it groups them so only one can be checked at a time, my question is: How to make this so the value for the first checkbox checked goes away when another checkbox is checked. This works only if you check a box then uncheck the same box, but if you check a box then check another you will see two values appear. I can not figure this out. Any help will be greatly appreciated. Thank you!
this 'single choice" behavior belongs to radio input, not checkbox.
$('#inputs input').change(function() {
if (this.checked) {
$span = $('<span></span>');
$span.text('$'+ this.value);
$('#results').html($span);
}
else {
$('span:contains('+this.value+')', '#results').remove();
}
});
body {
background: skyblue;
}
<div id="inputs">
<input type="radio" name="amount" value="50.00" id=i50>
<label for="i50">50</label>
<input type="radio" name="amount" value="20.00" id=i20>
<label for="i20">20</label>
<input type="radio" name="amount" value="15.00" id=i15>
<label for="i15">15</label>
<input type="radio" name="amount" value="10.00" id=i10>
<label for="i10">10</label>
<br><br><span>Selected: </span><span id="results"></span></div>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
I'm constructing this webpage and i want to change the label and mas of an input depending on the radio button selected by the user.
I have read all the posts from people with the same problem, like jQuery .focus() and .blur() not working in Chrome or Safari or http://juristr.com/blog/2008/06/attaching-client-side-event-handler-to/ but the solutions proposed don't seem to be working!
Here's the javascript:
$(document).ready(function() {
$("#cep").mask("99999-999");
$("#jur", "#fis").click(function() {
docProcess(this.value);
});
function docProcess(value) {
alert("hi");
if (value == "jur") {
$("#docLabel").value = "CNPJ: ";
$("#docLabel").mask("99.999.999/9999-99");
} else {
$("#docLabel").value = "CPF: ";
$("#docLabel").mask("999.999.999-80");
}
}
});
and here is the html:
<label for="clientType">Tipo de cliente: </label>
<input class"radioButton" type="radio" name="clientType" id="jur" value="jur" />
<label class="radioButton" for="clientType">Jurídico</label>
<input class"radioButton" type="radio" name="clientType" id="fis" value="fis" />
<label class="radioButton" for="clientType">Físico</label>
<label for="doc" id="docLabel">CNPJ: </label>
<input type="text" id="doc" name="doc" />
Any help?
Instead of writing $("#docLabel").value = "CNPJ: ";, write $("#docLabel").text("CNPJ: ");.
Multiple selectors are delimited by a comma within the string. Update your selector to $("#jur, #fis") and it will work fine.
For more info regarding multi select statements reference jQuery Multiple Selector
$(document).ready(function() {
//$("#cep").mask("99999-999");
$("#jur, #fis").click(function() {
docProcess(this.value);
});
function docProcess(value) {
alert("hi");
if (value == "jur") {
$("#docLabel").value = "CNPJ: ";
//$("#docLabel").mask("99.999.999/9999-99");
} else {
$("#docLabel").value = "CPF: ";
//$("#docLabel").mask("999.999.999-80");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="clientType">Tipo de cliente:</label>
<input class "radioButton" type="radio" name="clientType" id="jur" value="jur" />
<label class="radioButton" for="clientType">Jurídico</label>
<input class "radioButton" type="radio" name="clientType" id="fis" value="fis" />
<label class="radioButton" for="clientType">Físico</label>
<label for="doc" id="docLabel">CNPJ:</label>
<input type="text" id="doc" name="doc" />
Thanks all, so it was a bit of help from adeneo and pierre!
changed the access to $("#jur, #fis") and the prop change $("#docLabel").text("CNPJ: ") and it worked like a charm! ty!
I'm working on a project in which I have to toggle the visibility of a <div>.
I've got the following code:
<input type="radio" name="type" value="1"> Personal
<input type="radio" name="type" value="2"> Business
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
I would like to togle the business-fields div. So, if none of the radio buttons, or the 'personal' radio button is selected: The div should be hidden. If the 'business' radio button is selected, I want it to show.
Currently, I am using this code:
$("input[name='type']").click(function() {
var status = $(this).val();
if (status == 2) {
$(".business-fields").show();
} else {
$(".business-fields").hide();
}
});
However, I was wondering if I can do this using the .toggle() function.
I usually tend not to use JS if possible, therefore here comes a HTML+CSS way approach.
.bussines-type .business-fields {
display: none;
}
.bussines-type input[value="2"]:checked ~ .business-fields {
display: block;
}
<div class="bussines-type">
<input id="bt1" type="radio" name="type" value="1">
<label for="bt1"> Personal</label>
<input id="bt2" type="radio" name="type" value="2">
<label for="bt2"> Business</label>
<div class="business-fields">
<input type="text" placeholder="Company name" name="company-name">
<input type="text" placeholder="Vat number" name="vat-number">
</div>
</div>
The ~ stands for any siblings, that are after the element we defined before the ~ sign.
I'd suggest using the change event, and supplying a Boolean switch to the toggle() method, which will show the jQuery collection of elements if the switch evaluates to true, and hide them if it evaluates to false:
// select the relevant <input> elements, and using on() to bind a change event-handler:
$('input[name="type"]').on('change', function() {
// this, in the anonymous function, refers to the changed-<input>:
// select the element(s) you want to show/hide:
$('.business-fields')
// pass a Boolean to the method, if the numeric-value of the changed-<input>
// is exactly equal to 2 and that <input> is checked, the .business-fields
// will be shown:
.toggle(+this.value === 2 && this.checked);
// trigger the change event, to show/hide the .business-fields element(s) on
// page-load:
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="type" value="1">Personal</label>
<label>
<input type="radio" name="type" value="2">Business</label>
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
Incidentally, note I've also wrapped the associated text, to indicate the radio-button's purpose, inside of a <label> element to directly associate that text with the <input>, so clicking the text checks the <input> automatically.
References:
change().
on().
toggle().
JS Fiddle
Try this one
<input type="radio" name="type" value="1" checked ="true"> Personal
<input type="radio" name="type" value="2"> Business
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
.business-fields{
display: none;
}
$("input[name='type']").change(function() {
$(".business-fields").toggle();
});
You may use like this:
$("input[name='type']").change(function() {
var status = $(this).val();
if (status != 2) {
$(".business-fields").hide();
} else {
$(".business-fields").show();
}
});
.show and .hide are pretty slow.
https://twitter.com/paul_irish/status/564443848613847040
It's better to toggle a css class on and off with javascript. Set the css of the class to {visibility: hidden} or {display: none}
use the below code
<script>
$(function(){
$(":radio[value=1]").click(function(){
var isVisible = $( ".business-fields" ).is( ":visible" );
if(isVisible==true)
$('.business-fields').toggle();
});
$(":radio[value=2]").click(function(){
var isVisible = $( ".business-fields" ).is( ":visible" );
if(isVisible==false)
$('.business-fields').toggle();
});
});
</script>
AND HTML is-
<input name="type" type="radio" value="1" >Personal
<input type="radio" name="type" value="2" checked="checked"> Business
<div class="business-fields">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>
Possibly a more elegant solution, It's a bit more readable in my opinion, and and as #Ollie_W points out it might be more performant that toggle (show/hide).
$('input[name="type"]').on('change', function(event) {
var radioButton = $(event.currentTarget),
isBusiness = radioButton.val() === 'business' && radioButton.prop('checked');
$('.business-fields').toggleClass('hidden', !isBusiness);
}).change();
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="type" value="personal">Personal</label>
<label>
<input type="radio" name="type" value="business">Business</label>
<div class="business-fields hidden">
<input type="text" name="company-name">
<input type="text" name="vat-number">
</div>