Ok, I've been coding a website for a while now and this the first "insurmountable" problem I haven't found an aswer for, so now I'm turning to you, the experts.
On my form I have three drop-down menus, one textbox and one disabled checkbox. I want it to work so that when a user has selected an option from each drop-down menu and written something on the textbox, the checkbox becomes enabled.
I have found this code when I have been looking for a solution and it's very similar to my problem. However, when I try to add another drop-down menu, it still enables the button when I select an option from the first menu and completely ignores the second menu. I'm sorry, I'm new to Jquery/JavaScript and I just think it should work that way when the class names are same on both menus (jQuery class selector: ('.dropdown')).
I have also found a similar code with textboxes. I just don't know how to combine these codes so it would act the way I want.
See it here: http://jsfiddle.net/JKmkL/109/
$(document).ready(function() {
$('.required').change(function() {
var done=true;
$('.required').each(function(){
if(!$(this).val()){
$('.myCheckBox').prop('disabled',true);
done=false;
return false;
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
});
And add class required to the elements.
Edit:
The code above assumes that the default <option> has value="". If not, you can use http://jsfiddle.net/JKmkL/114/
$(document).ready(function() {
$('.required').change(function() {
var done=true;
function quit(){
$('.myCheckBox').prop('disabled',true);
done=false;
return false;
}
$('.required.dropdown').each(function(){
if($(this).children(':selected').hasClass("disablenext")){
return quit();
}
});
$('.required[type=text]').each(function(){
if(!$(this).val()){
return quit();
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
});
Edit 2:
If you want to show a div when the checkbox is checked and hide it when the checkbox is disabled, use
JavaScript:
$(document).ready(function() {
$('.required').change(function() {
var done=true;
function quit(){
$('.myCheckBox').prop('disabled',true).removeAttr('checked');
done=false;
$('#div2').addClass('hide');
return false;
}
$('.required.dropdown').each(function(){
if($(this).children(':selected').hasClass("disablenext")){
return quit();
}
});
$('.required[type=text]').each(function(){
if(!$(this).val()){
return quit();
}
});
if(done){$('.myCheckBox').prop('disabled',false);}
});
$('.myCheckBox').click(function(){
$('#div2')[(this.checked?'remove':'add')+'Class']('hide');
});
});
CSS:
.hide{display:none}
See it here: http://jsfiddle.net/JKmkL/133/
I assume that dropdown's default value is value=""
$('#form_submit_button').click(function(){
$('.checkbox').attr('disabled',true);
var all_selected = true;
$('.dropdown').each(function(){
if(!$(this).val())
{
all_selected = false;
}
});
if(!$('#text_box').text())
{
all_selected = false;
}
if(all_selected)
{
$('.checkbox').attr('disabled',false);
}
});
First of all, say the id for the three dropdowns are called d1, d2, and d3; textbox is txt; and checkbox is chk. You can then define a function that determines when the checkbox must be enabled:
function shouldEnableCheckbox() {
var nonEmptyFields = $("#d1,#d2,#d3,#txt").filter(function() {
return this.value;
});
return nonEmptyFields.length == 4;
}
Essentially, you select all 4 elements, filter those that are non-empty, and compare the resulting filtered array with 4. If it is true, it means you should enable the checkbox.
Then, assign the change event handler to all 4 elements, invoke the previous function, and assign the result to the disabled property of the checkbox:
$("#d1,#d2,#d3,#txt").change(function() {
$("#chk").prop("disabled", !shouldEnableCheckbox());
});
Here's the working DEMO, and another working, more generic DEMO, which uses a class instead of ids to identify the required elements.
Related
In one of "Add product" page, I've select field that shows/hides based on what we select on another select field. This is the code:
$(function() {
$('#warranty_periods').show();
$('#warranty_type').change(function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
});
});
My problem is how to hide it on the edit page if "warranty_type" was other than '1' while adding the product.
Thanks
If you want the same logic to be invoked when the page loads, then do exactly that. For example, you can define a function that you would use for the event you currently have as well as be immediately invoked. Something like this:
$(function() {
var toggleWarrantyPeriod = function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
};
toggleWarrantyPeriod();
$('#warranty_type').change(toggleWarrantyPeriod);
});
Try to logout the value of warranty_type using
console.log($('#warranty_type').val());
Check if you are getting the desired value
Ok,i am building a fantansy football game using codeigniter , Grocery CRUD and Jquery. I have a view where user select 15 players from checkboxes where i will use the name attribute to select GK1,GK2,DEF1,DEF2,DEF3,DEF4,DEF5,MID1,MID2,MID3,MID4,MID5,FWD1,FWD2 and FWD3 and pass their value to the controller. My question is , how do i create a javascript Jquery Code for maybe Midfielders (MID) in such a way that when a user click the first Midfielder the javascript append input name="MID1" and on checking another box it becomes input name="MID2" without changing the name for MID1. So far i the javascript is working but when i click another player the name value changes in all players also if i deselect the name player for that particular player doesnt remove. Here is my JS..
<script>
$(document).ready(function(){
$(".gk").change(function() {
var number=$('[class="gk"]:checked').length;
if(this.checked) {
$(".gk").each(function() {
$(".gk").attr('name',"GK"+number);
});
} else {
$('.gk').attr('name', number);
}
});
});
</script>
and here is my view
<input type="checkbox" class="gk" value="<?=$row->playerID ?>" > <?= $row->playerID?> </input>
Regarding your issue of all players having their name changed, the culprit may be '.each()'. Isn't it supposed to be more like :
$(".gk").change(function() {
if(this.checked) {
var number=$('[class="gk"]:checked').length;
// $(".gk").each(function() {
$(this).attr('name',"GK"+number);
// });
Among other things, you have a problem when you deselect the players, since you are only running that piece of code that updates the name when the $(".gk") is checked... also, in order to add a different number to each one, you'll have to increment an index value, for example, and add it to the name, not the variable number, which will be the size of the selected elements... On top of this, the last variable "number" should be outside of the "if" otherwise you won't see it in the else...
Check this, see if it helps
$(document).ready(function(){
$(".gk").change(function() {
var checked=$('[class="gk"]:checked').length;
alert("You have "+checked+" Gks checked")
var index = 1;
$(".gk").each(function() {
if($(this).prop('checked')){
$(this).attr('name',"GK"+index);
alert("Getting GK "+index)
alert("this GK name is "+$(this).attr('name')
index++;
}
else {
$('.gk').attr('name',"");
}
});
});
});
http://jsfiddle.net/xn3P9/5/
Once you update the name it won't show on the page inspector.
You final solution should be this:
$(document).ready(function(){
$(".gk").change(function() {
var index = 1;
$(".gk").each(function() {
if($(this).prop('checked')){
$(this).attr('name',"GK"+index);
index++;
}
else {
$('.gk').attr('name',"");
}
});
});
});
I still have a hard time understanding what you are looking for but maybe it is something similar to this:
$(document).ready(function(){
$(".gk").change(function() {
$(".gk:checked").each(function(index, gk) {
//Will give each selected GK a unique name
$(".gk:checked").attr("name", "GK"+index);
});
});
});
While firstli.hasClass('selected') does work and retrieves the correct element. The removeClass function doesn't seem to remove to the class. When an element is unchecked I would like the first li to be unchecked as well.
Here is the jfiddle (the code is at the bottom)
Note: I want "Select All" to become unchecked when you uncheck one of the other options.
var firstli = $('.dropdown-menu.inner li').first();
firstli.click(function(event) {
if (!firstli.hasClass('selected')) {
$('.selectpicker').selectpicker('selectAll');
}
else {
$('.selectpicker').selectpicker('deselectAll');
}
return false;
});
var alllis = $('.dropdown-menu.inner li:not(:first-child)');
alllis.click(function(event) {
if ($(this).hasClass('selected')) {
alert(firstli.hasClass('selected')); //true
firstli.removeClass('selected');
}
});
Your problem is with setSelected() rechecking the Select All option. To fix this, I changed that function to the following:
setSelected: function (c, d) {
if (d) {
this.$menu.find("li").eq(c).addClass("selected")
} else {
this.$menu.find("li").eq(c).removeClass("selected")
this.$menu.find("li:first-child").removeClass("selected")
}
}
Basically, if it has to remove the selected class, you know they're not all checked. This works.
http://jsfiddle.net/eC8hF/30/
How would you write a script to disable a select if you have two selects (both with ids) and an option in the first select is selected.
Since you have tagged the question with jQuery, I'll give you an idea of how to do it using jQuery:
$("#firstSelectId").change(function() {
var first = $(this);
$("#secondSelectId").prop("disabled", function() {
return first.val() === "whatever";
});
});
Note that the above assumes you want to enable the second select again if a different option was selected. Here's a working example.
How about:
$('#first').change(function() {
if ($(this).val() != '') { // '' is default value??
$('#second').attr('disabled', 'disabled');
} else {
$('#second').removeAttr('disabled');
}
});
use something like:
if($("#selectbox1 option:selected").val() == ...)
to see what was selected.
and then use
$("#selectbox2").attr('disabled', 'disabled');
to disable that other box.
I've seen many check/uncheck all checkboxes scripts. But far most does not respect that if I toggled all checkboxes using the "checked all"-checkbox and then uncheck a single one in the list, the "checked all" checkbox is still checked.
Is there an elegant way of handling this case?
$('#checkAll').click(function() {
if(this.checked) {
$('input:checkbox').attr('checked', true);
}
else {
$('input:checkbox').removeAttr('checked');
}
});
$('input:checkbox:not(#checkAll)').click(function() {
if(!this.checked) {
$('#checkAll').removeAttr('checked');
}
else {
var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
var numTotal = $('input:checkbox:not(#checkAll)').length;
if(numTotal == numChecked) {
$('#checkAll').attr('checked', true);
}
}
});
Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/
As pointed out in the question's comment, a regular checkbox is not perfect for this. My implementation disables the "check all" box as soon as one checkbox is unchecked. So, to uncheck all still-checked checkboxes you'll have to click twice (first to re-check the unchecked ones and then to uncheck all other ones).
However, with a tri-state checkbox this might still be necessary as the state order might be unchecked->indefinite->checked->unchecked, so you'd need two clicks to come from indefinite to unchecked.
Since you probably don't want to check ALL checkboxes on your page with "Check All", replace input:checkbox with e.g. .autoCheckBox or input.autoCheckBox:checkbox and give those checkboxes class="autoCheckBox".
If you want all checkboxes inside a certain form, simple use #idOfYourForm input:checkbox or form[name=nameOfYourForm] input:checkbox
You can achieve this by attaching a click handler to each of the target checkboxes, and have that handler un-check the "control" checkbox based on the collective state of those target checkboxes. So, something like this:
// Control checks/unchecks targets
$('#controlcheckbox').click( function(){
$('.targetcheckboxes').attr('checked', this.checked );
});
// Targets affect control
$('.targetcheckboxes').click( function(){
if( $('.targetcheckboxes:not(:checked)').length ){
$('#controlcheckbox').attr('checked',false);
}
});
Even better -- you could attach this logic to an enclosing container element, and watch for the event using .delegate():
$('#some_container').delegate('.targetcheckboxes','click',function(){...} );
$("#selectall").click(function(){
var checked = $("#selectall").attr("checked");
$(".selectone").attr("checked",checked);
});
For setting select all
$(".selectone").click(function(){
var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
var flg = true;
if(jQuery.inArray(false, net)){
flg= false;
}
$("#selectall").attr("checked",flg);
});
Perhaps something like this:
$('tbody input:checkbox').change(function(){
if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) {
$('#checkAll')[0].checked = false;
}
});
This assumes that #checkAll is in the thead section of your table.