check out this fiddle: http://jsfiddle.net/5rmEe/61/
var inputVal = false;
//allow user to deselect a radio button by clicking a checked radiobutton
$('input[type=radio]').each(function(){
var inputObj = $(this);
inputObj.click(function(e){
if(inputVal === inputObj.val()){
inputVal = false;
inputObj.attr('checked', false);
}
else{
inputVal = inputObj.val();
inputObj.attr('checked', 'checked');
}
e.stopPropagation();
});
});
$('.asdf').click(function(){
$('.haha').trigger('click');
});
notice that the asdfsdaf span would trigger a click on the radio button
First of all, the radio button is set such that if you click on a checked radio button it will uncheck itself (try it out) and this works when clicking on the radio button itself
now If you click on the span, it'll make the checkbox check itself properly but then if you click on the span again it will NOT set the radio button as unchecked even though evidently it performs a click event and theoretically it should uncheck the radio button accordingly due to the click event (this event works if you actually click on the radio button)
why is this happening? is the attr() method not working if the event is manually triggered using .trigger()?
how can I resolve this such that clicking on the span would ALSO trigger an uncheck in the radio button when the radio button is checked?
Use triggerHandler instead of trigger.
$('.haha').triggerHandler('click');
This will cause the handler to be fired without causing the default behavior of the click.
You can prevent the default click action by calling preventDefault() from within your click handler, like so:
inputObj.click(function(e){
e.preventDefault(); //add this to prevent default click behaviour
if(inputVal === inputObj.val()){
inputVal = false;
...
...
See working fiddle
Related
checkbox can not checked or uncheck by directly click on checkbox ?
i was create click on div for toggle checked/unchecked checkbox. this function was best.
But when i tried to click on checkbox directly, i can not check or uncheck checkbox.
How can i do that ?
https://jsfiddle.net/jddwxtst/
<script>
function onclick_cover_checkbox_fn(){
var main_checkbox_checked_uncheck_var = document.getElementById("main_checkbox_checked_uncheck");
var main_checkbox_checked_uncheck_var_checked_status = main_checkbox_checked_uncheck_var.checked;
if(main_checkbox_checked_uncheck_var_checked_status != true)
{
document.getElementById("main_checkbox_checked_uncheck").checked = true;
checked_all_or_uncheck_all_fn();
}
else
{
document.getElementById("main_checkbox_checked_uncheck").checked = false;
checked_all_or_uncheck_all_fn();
}
}
</script>
<script>
function checked_all_or_uncheck_all_fn(){
alert("5555");
}
</script>
Here is a example in jquery:
Bind a change handler, then just uncheck all of the checkboxes, apart from the one checked:
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
Here's a fiddle
here is the updated working example https://jsfiddle.net/jddwxtst/2/
problem is when you directly click on the checkbox it first run checked_all_or_uncheck_all_fn() method but then it execute onclick_cover_checkbox_fn() method too (you don't need) because div also receive click event.so if you check then method onclick_cover_checkbox_fn() method will uncheck it .to avoid this you shroud stop event propagating in checked_all_or_uncheck_all_fn() method.
function checked_all_or_uncheck_all_fn(e){
alert("5555");
// stop event propagating
}
for cross browser stop propagating read this http://javascript.info/tutorial/bubbling-and-capturing
What I am trying to do is to prevent the user from changing the radio button until they confirm that they want to leave the "page". The radio button should not change to the one they clicked until after they click on the button in the popup to say "ok leave page".
This call handles changing the page to the selected radio button, and everything else. This should only be fired if the button in the popup is clicked:
$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){
//Change the radio button and everything else
});
This handles the popup and everything:
$(function(){
var LEAVEPAGE;
//Radio button changes, so show a popup
$("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){
e.preventDefault();
e.stopPropagation();
LEAVEPAGE = e.currentTarget;
//Show the popup to ask if you are sure you want to switch radio buttons
});
//Click the button in the popup to leave the page, so change the originally clicked radio button.
$("body").unbind("click").on("click", ".leave-page", function(){
$(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page
});
});
What is happening is the radio button is just being changed regardless, it shows the popup too, however it isn't waiting for a response from the popup. It just switches anyways. Also, when I click on the .leave-page button, it triggers change (it's suppose to be so that it will load the new page attributed to that button), however it ALSO triggers the popup again (as they both use the change event).
I am very stumped.
DEMO
JS
var optionTarget;
$(":radio").click(function(e){
e.preventDefault();
optionTarget = e.target;
$("#leave-dialog").show();
});
$("#leave-dialog button").click(function(){
$("#leave-dialog").hide();
});
$("#leave-btn").click(function(){
$(optionTarget).prop('checked', true);
});
HTML
<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
<br/>
<button id="leave-btn">Yes</button>
<button>No</button>
</div>
I'm trying to cancel a radio button click. I have a jquery click handler like this:
$("#myList").on("click","input", function(){
return false;
});
This works fine when there is already a selected value. But if I click a radio button from a group that has no selected value, the return false does not work, and the element that I clicked actually gets selected.
Any clues?
Edit:
Here is the fiddle demonstrating the problem:
http://jsfiddle.net/SFZMm/2/
Edit2:
Just found out this only happens on chrome :( Firefox and IE work as expected. Maybe a workaround?
Here, try this JS_FIDDLE-DEMO
It detects the click on the parent container. Not the radio button it self.
//listen to click on parent div,span,li for example.
$("#myList-parent").click(function(){
alert('You clicked radio!');
//Now put your logic here. I decide based on the radio button value.
if($('input:radio[name=type]:checked').val() == "UnSelectable"){
alert($('input:radio[name=type]:checked').val());
return false;
}
});
Update (work around for Chrome): JS-FIDDLE-DEMO
It seems Chrome has issues with on click so replace it with on mousedown (or use both?):
$("input").on("mousedown",function(e) {
e.preventDefault();
if ($(this).is(':checked')) {
alert('This radio button was checked in mousedown');
} else {
alert('This radio button was not checked in mousedown');
}
});
Use change methods for input elements instead of click.
$("#myList").on("change","input", function(e){
if(something){
e.preventDefault();
} else{
//for test
alert('not true');
}
});
I'm using a checkbox and I want people to be able to check/uncheck it.
However, when they uncheck it, I'm using a jQueryUI modal popup to confirm that they really want to do that. Thus they can click OK or Cancel, and I want my checkbox to be unchecked only if they click OK.
That's why I would like to catch the uncheck event to prevent the checkbox from being visually unchecked, and uncheck it myself programmatically if the user happens to click on OK.
How could I do that ?
PS: I know I could re-check it after if the user clicks on Cancel but that would trigger the check event which I do not want.
$("#checkboxID").on("click", function (e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
// do the confirmation thing here
e.preventDefault();
return false;
}
});
Pure CSS Solution
Select Checkbox like -
input[type="checkbox"] {
pointer-events: none;
}
Works Pretty well, and now you can toggle your checkbox on any element click of your choice.
Something like:
$("#test").on('change', function() {
this.checked=!this.checked?!confirm('Really uncheck this one ?'):true;
});
FIDDLE
$("#checkboxID").click(function(e) {
var checkbox = $(this);
if (checkbox.is(":checked")) {
//check it
} else {
// prevent from being unchecked
this.checked=!this.checked;
}
});
How about using the HTML disabled property?
<input type="checkbox" name="my_name" value="my_value" disabled> My value<br>
Link:
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
$("#yourCheckBoxId").on('change',function(e){
e.preventDefault();
$("#yourPopDiv").popup();
});
preventDefault() will disable default behavior of your input[type="checkbox"]
And on your popup div
$("#ok").on('click',function(){
$("#yourCheckBoxId").attr("checked",true);
});
My value
Light javascript. Better than disable if you still need the element submitted in a form.
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})