Lot of research and tries but didn't work.My Problem is I want to enable my button on check of at least one checkbox from the available list.
Following is the screen:
Initially this button is enabled but my requirement is it should be disabled initially and if at least one of the checkbox is checked then it should be enabled.
Here,I have one view as Create inside which one more partial view is there which displays all the list view with the help of one controller method i.e within my Create view one more view is being rendered which displays all the available list.
If it would have been in one view then I would have easily done this as lot of fiddles are there with jquery by getting the id of the checkbox and passing to one jquery function. I know that I need to check the count for the checkbox in order to make my button enable/disable but again we dont have any change event as that in ASP.
Also on click of add , method for controller is begin triggered as:
[HttpPost]
public ActionResult Create(int id, List<MyModel> myModelList)
{
// code...
}
Here once I click on Add button this controller method is triggered where in my parameters(myModelList) I am able to check which checkbox is checked.So, this thing I need to implement on checking any of the checkbox such that the add button will be enabled on click of which I will be able to add my teams.
So how to implement this or what I need to do for this?
Thanks in advance.
UPDATE: Oops. Added the :checked pseudo class
This is how you might do it in jQuery
$('#add_button_id').prop('disabled', true); // To disable initially
$(document).on('click', '.checkbox_class', function(){
if( $('.checkbox_class:checked').length > 0 ){
$('#add_button_id').prop('disabled', false);
}
else{
$('#add_button_id').prop('disabled', true);
}
});
You'll have to add the id for the button and classes for checkbox as you have in your html code
you can do it this way:
$(document).on('click', '.checkbox_class', function(){
if(".checkbox_class:checked").length > 0)
$('#add_button_id').prop('disabled', false);
else
$('#add_button_id').prop('disabled', true);
}).change();
you can also trigger change on page load:
$(function(){
$(".checkbox_class").tirgger('change');
})
Related
I'm trying to create and 'edit' mode for my application on the Manage Users page. I have every users values (such as name, email, etc) inside of an <input> tag with the readonly attribute. I have a button at the top of the page called "Edit Mode". When that edit mode is clicked, I would like the admin to be able to then click on the input field and change it. I am able to successfully toggle the readonly attribute on click BUT I only want that feature to happen when editing == true but for some season it seems that the DOM is never sensing when the editing boolean has been changed. Here is the code
$(document).ready(function(){
var editing = false;
$(".edit-mode-toggle").click(function(){
editing = true;
});
if(editing){
$("user-block input").click(function(){
$(this).removeAttr("readonly");
});
}
$(".user-block input").blur(function(){
$(this).attr("readonly", true);
})
});
Again I would only like to removeAttr when the ".edit-mode-toggle" button is clicked and changes the editing variable to true. My current output is that when I click that button to toggle the boolean, I'm not able to execute my editing because the DOM hasn't seen the boolean has changed. Anyone know what might be going on. Im sure ill derp once I find a solution. I'm just drawing blanks here. Strictly jQuery by the way, I know this can be easily done with Angular or some other 3 way data binding framework but I want to avoid using those. Thank you!
Dom only runs that if(editing) condition at load time, you want to move that part into your click function.
$("user-block input").click(function(){
if(editing){
$(this).removeAttr("readonly");
}
});
Also, you need to define the var editing outside of the $(document).ready() function.
var editing = false;
$(document).ready(function(){
//other stuff
})
You should update your code because you are attaching the click events in the page load, and the second condition in the IF statement will always get attached because 'editing' variable is always set to false in the page load.
to fix it you have to make the variable 'editing' a global variable
var editing = false;
$(document).ready(function(){
$(".edit-mode-toggle").click(function(){
editing = true;
});
$("user-block input").click(function(){
if(editing){
$(this).removeAttr("readonly");
}else {
$(this).attr("readonly", true);
}
});
}
});
I've got a base background image and two checkboxes. I need replace the background image (via toggle class) with the correct class depending on which checkbox is selected. If both checkboxes are selected I need it to show the black background.
http://jsfiddle.net/2k96D/6/
$('#ax_lab').change(function () {
if ($('#ax_ov').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_lab');
}
});
$('#ax_ov').change(function () {
if ($('#ax_lab').is(':checked')) {
$('.axial').toggleClass('axial_all');
} else{
$('.axial').toggleClass('axial_over');
}
});
My fiddle works perfectly when I select and deselect in the same order, however, if I de-select the checkboxes in a different order than the order I selected them in, it doesn't default back to the original class. I know there must be a flaw in my logic, I'm just having trouble finding it. Any thoughts?
You need to be more explicit with the logic. Here's what I did:
$(document).ready(function () {
function updateAxialStatus() {
var axOv = $('#ax_ov').prop('checked'),
axLab = $('#ax_lab').prop('checked');
$('.axial').removeClass('axial_all axial_lab axial_over');
if (axOv && axLab)
$('.axial').addClass('axial_all');
else if (axOv)
$('.axial').addClass('axial_over');
else if (axLab)
$('.axial').addClass('axial_lab');
}
$('#ax_lab, #ax_ov').change(updateAxialStatus);
});
That version just explicitly checks the status of the two checkboxes and updates the class to reflect the status. The same handler can be used for both checkboxes.
Note that old versions of IE may not fire the "change" event for checkboxes until the checkbox loses focus, but you can safely use "click" instead.
I have a form where I add some inputs dinamically.
Every time the user select another "fornecedor" from addMaterialFornecedor select I add a input for preco.
My problem is that when I click the button and call the validate() function http://js.sapo.pt/SAPO/Ink/FormValidator/doc.html if I selected the "fornecedor"s before I click the button validate the form but if I click the button, selected the "fornecedor"s, and click again it will not validate :s
http://jsfiddle.net/rVQB4/3/
the javascript code I'm using:
function formValidate(form){
if(!SAPO.Ink.FormValidator.validate(form, options)){
//some debug
console.log(form);
return false;
}else{
//some ajax calls
return false;
}
}
Here is a video that exlain better the problem: https://dl.dropbox.com/u/6416035/stack3.ogv
sorry my english :s
thanks :)
Livequery works wonders for items dynamically added to a webpage by binding events to events dynamically added to the DOM. If this binding doesn't take place, events won't fire for those dynamic objects.
Here's an example:
$(document).ready(function() {
$("#myDynamicObject").livequery(function() {
$(this).change(function() {
// Do something.
});
});
});
See here for more information on how to use livequery.
I'm using checkboxes to toggle the enabled and disabled state of some multi-lists on a registration form. The checkbox is labeled with the category, and the multi-list contains the items that belong to that category.
I'm using jQuery 1.7.2.
$('#sch_cat_hockeyschools').toggle(function(ev) {
ev.stopPropagation();
$("#type_select_hockeyschools").prop("disabled", false);
$("#type_select_hockeyschools").removeProp("disabled", "disabled");
$("#sch_cat_hockeyschools").prop("checked", true);
$("#sch_cat_hockeyschools").prop("checked", "checked");
}, function(ev) {
ev.stopPropagation();
$("#type_select_hockeyschools option:selected").removeAttr("selected");
$("#type_select_hockeyschools").prop("disabled", true);
$("#type_select_hockeyschools").prop("disabled", "disabled");
$("#sch_cat_hockeyschools").prop("checked", false);
$("#sch_cat_hockeyschools").removeProp("checked");
});
Sample of corresponding checkbox HTML:
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_hockeyschools" value="1" />General Hockey Schools
<input class="catmark" type="checkbox" name="sch_categories[]" id="sch_cat_springhockey" value="2" />Spring Hockey
The problem is that the upon clicking the checkbox, the checkbox does not become ticked or checked; it immediately returns to an unchecked state, which I thought the stopPropagation() function would help with. Apparently not. The multi-lists get enabled and disabled as expected, but the checkbox doesn't get ticked.
The result of this problem is that when the form is submitted, the array containing the selected categories is empty; thus, because at least one checked category is a required field in the form, the PHP script that processes the form throws one of my errors which tells me a required field was left blank.
Any ideas on how to make sure that the checkbox actually gets checked, and by extension, POSTS actual data to the processing script?
Thanks guys.
The problem is the use of toggle -- per the documentation:
The implementation also calls .preventDefault() on the event, so links
will not be followed and buttons will not be clicked if .toggle() has
been called on the element.
toggle itself is calling preventDefault, which is stopping the default behavior of the event, checking/unchecking the box.
Rather than toggle, use bind or on (see edit note below) to add a listener for the change event, in which you can examine the state:
$('#sch_cat_hockeyschools').on('change', function () {
if (this.checked) {
// do stuff for a checked box
console.log('check is on');
} else {
// do stuff for an unchecked box
console.log('check is off');
}
});
Try it out at jsFiddle.
EDIT
Please note, this code shows use of the on method, whereas the jsFiddle example uses bind. As pointed out by Sam Sehnert, on is the preferred method for attaching events with > jQuery 1.7. If you are using an older version of jQuery, use bind as in the jsFiddle example.
Documentation
jQuery.toggle
jQuery.bind
jQuery.on
I have one GridView "gvDetail" which has 30 columns(include both Template and BoundField).
In that columns, I have One CheckBox "chkSelect" in the Second Column. And One LinkButton "lnkQC" in the 22nd Column.
I want to Enable the LinkButton when I check the CheckBox in the GridView. And also I want to Disable the LinkButton when I uncheck the CheckBox.
How to achieve this using JavaScript or JQuery?
Please I need all your suggestions...
Your LinkButton renders to simple anchor. The code will looks like this. If you have some links inside the table you will need to specify some css class to this linkbutton and change selector in this js.
$(document).ready(function() {
$('#grid-table-id input:checkbox').change(function() {
var linkDisableHandler = function(e) {
e.preventDefault();
return false;
};
if ($(this).is(':checked')) {
$(this).closest('tr')
.find('a')
.removeClass('disabled')
.unbind('click', linkDisableHandler);
}
else {
$(this).closest('tr')
.find('a')
.addClass('disabled')
.bind('click', linkDisableHandler);;
}
});
});
Now, I just changing the css class for link, but to disable link you need to take a look on this post: jQuery disable a link
Just need to add onDatabound event of Gridview and Register the javascript of Checkbox changed event and pass the linkbutton id as a parameter in Registered javascript. You will get the linkbutton in javascript, you can do as you want.