I have a button element which has a javascript function attached to it, and this element, contains an input checkbox. Is it possible somehow to check/uncheck this checkbox, without firing the buttons javascript function?
I know that it is probably not a very good design, placing an input checkbox inside a button element, but I am trying to modify a plugin, and if possible, I would remain at my current design, because I would lose too much time on changing the whole design, time, which unfortunatly I can't afford:|
EDIT: Sorry, placing my text in < and > tags, made them dissapear:|
EDIT2:
What I am trying to achieve is to use tablesaw to create a sortable data table. When clicking on one of the headers in a tablesaw table, if sortable is set, it sorts the table by the selected column. I would like to place a checkbox in the first header, to select all rows visible. This is how my td looks like:
<th data-tablesaw-sortable-default-col="true" class="tablesaw-cell-persist
tablesaw-sortable-head tablesaw-sortable-ascending" scope="col"
data-tablesaw-priority="persist" data-tablesaw-sortable-col="true">
<button class="tablesaw-sortable-btn">
<div class="checkbox checkbox-success">
<input id="test" name="test" type="checkbox">
<label for="test">
Information
</label>
</div>
</button>
</th>
The event to the button is attached by tablesaw with an onclick event, but I can modify that too, cause I have access to the source. So basicaly, what I would like that, if a click is made ON the input element, modify the checkbox state, if a click is made anywhere else on or in the button, fire the tablesaw event.
I don't think that the attached javascript event is the problem, check out the following fiddle:
http://jsfiddle.net/16d8kasp/
There is no event attached here, but the checkbox state can't be toggled anyway.
Try this Jquery example. Might work for you -
JS Fiddle
$("input#test").on("click",function(e){
e.stopPropagation();
});
Related
I have a sequence of radio buttons on a web page. On page-load, the first radio button in the sequence is selected by default.
In addition, there is a <div> associated with each radio button. (The corresponding <div>'s class is the same as the corresponding radio button's value.)
Even though the first radio button is checked by default, the jQuery (source) does not trigger until the already-checked radio button is manually clicked after page-load. I learned that I can solve this by manually triggering the click myself on page-load via jQuery.
I tried doing so with $("input:radio:first").prop("checked", true).trigger("click"); (source), which I thought would click the first radio button in the sequence as desired, but to no success. (By the way, is this code clicking the first radio button on the page, or is it clicking the first checked radio button on the page? I'd prefer the code to trigger("click") the first checked radio button on the page.)
I also already hide all <div>s in the CSS, as suggested here.
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".radio_div").not(targetBox).hide();
$(targetBox).show();
});
});
$("input:radio:first").prop("checked", true).trigger("click");
.radio_div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio"
value="Bacon" checked="checked">Part 1</label>
<label>
<input type="radio"
value="is">Part 2</label>
<label>
<input type="radio"
value="Good">Part 3</label>
</div>
<div class="Bacon radio_div">Cured sugary meat</div>
<div class="is radio_div">be</div>
<div class="Good radio_div">bangin</div>
JSFiddle
How can I make jQuery click the default-checked radio button (so that its respective <div> appears) on page-load?
In addition, in my actual environment (which uses a semi-customizable web builder, so it's difficult to reproduce all the code involved), the default-checked radio button must always be clicked twice in order to activate its corresponding <div> with the jQuery. However, I cannot replicate this behavior in JSFiddle. If anyone has any insight on what might be causing this (and how to troubleshoot/resolve), I'd be happy to hear. (Perhaps jQuery could simulate a second click whenever a radio button click is detected?)
EDIT: The issue with my production environment (in the gif) was that the value of the first radio button was changing to whatever radio button was previously selected. Super ridiculous.
Because you're using 2 click functions.
I have the radio group:
<input type="radio" name="menubar" id="menubar_1" checked="{{a::change}}" > A <br>
<input type="radio" name="menubar" id="menubar_2" checked="{{b::change}}" > B <br>
Full example on Plunker
I need to track the checked propery, but after I check-up the input, the variable will always be TRUE. Maybe it a bug?
Also I can't get work 'if' template.
And one more question: how to set default checked property?
The problem is that change event only fires when you check a radio button, not when you uncheck it. So always you check it, it goes to true, and when you uncheck it, it dosn't trigger change event as you can see in this answer
For the same reason, the dom-if never disappears.
That doesn't happen with checkbox as you can check in this plnkr, where binding and dom-if is working with the result of checkbox.
I have a custom jquery-plugin that will hide the real checkbox and show an enhanced component instead of the real one.
for this code
<label for="local">
<input type="checkbox" ng-model="value" ng-change="filterByCoursePlace('test')" name="local" id="local"><span>Local</span>
</label>
The plug-in generates this code ( it adds a div with on top of the checkbox )
<label for="local">
<div class="jcf-class-ng-pristine jcf-class-ng-valid chk-area chk-unchecked chk-focus"><span></span></div>
<input type="checkbox" ng-model="value" ng-click="filterByCoursePlace('test')" name="local" id="local" class="ng-pristine ng-valid"><span>Local </span>
</label>
the big square is the fake one ( shown to the user ) and the small square is the real one.
the real checkbox will be hidden to the user.
The problem is: when I click on the real one ng-change works But when I click on the fake one ng-change does not work although the real one gets checked too.
How much can you change the jQuery plugin?
The generated code has an ng-click="filterByCoursePlace('test'), that's why if you click on the real one works.
The quickest way to do what you want is to remove every ng-change/ng-click add in your controller a watch:
$scope.$watch('value', function(newVal, oldVal) {
filterByCoursePlace('test')
});
Or if you can change how the plugin generates the code you could add the ng-click to the fake checkbox instead of the real one.
Anyway, if you want to trigger filterByCoursePlace also when value is changed by another function (like a 'resetFilters' button), I would go with the $scope.$watch way.
I ended up showing the real checkbox on top of the fake one and make it invisible with css( opacity = 0)
That's not the perfect solution but it worked.
I have the problem with labels within buttons because a click on the label is also causing the button click to fire.
So I got two fired events after each other, what I don't want of course.
My buttons with label included look like this:
<button id="b" name="Button" class="btn btn-primary btn-large">
<label id="b_button_label" class="fontf">
Click me
</label>
</button>
Is there any quick solution, perhaps with jQuery, to prevent the double firing?
Yep, solution is not to put labels inside your buttons.
The labels are meant to describe the control itself, and clicks on a control's label will act like a click on the control itself.
From the spec:
The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.
You can use stopPropagation event in jQuery from bubbling up the event
$(function() {
$('#b_button_label').on('click' , function(e) {
e.stopPropagation();
// Your code goes here
});
});
Also why do you want to add the Label inside the button when you have the value field to display its text.
I don't think this is a valid HTML code. You cannot add a LABEL inside a BUTTON. A simple way of adding text to your button is:
<button id="b" name="Button" class="btn btn-primary btn-large">click me</button>
I'm using some radio buttons to influence the behavior states of a jQuery widget.
That widget can be used in a form but, since these radios don't contain any actual data, I don't want them to submit noise to the server, or cause naming conflict to whoever will use the widget in his form.
Here are two potential solution starts, not yet satisfying though :
remove the name attribute : seems to work fine for other inputs, but turns my radios into checkboxes : it kills the link between them so selecting one doesn't unselect the others. Is there an HTML way (i.e. other than Javascript event) to bind them without a name attribute ?
disable the input : As expected, nothing is submitted, but the radios become grey and can't be clicked. Is there any way that they stay clickable yet unsubmittable, like disabled at submit time ?
As far as possible, I'm rather looking for a cross-browser solution.
Try call a function before submit, that disables the radio buttons.
function disableBtn() {
document.getElementById('idbtn1').setAttribute('disabled', 'disabled');
document.getElementById('idbtn2').setAttribute('disabled', 'disabled');
return true;
}
Then, in form:
<form action="file" method="post" onsubmit="return disableBtn()">
Try this:
<form>
<input type="radio" name="group1" value="1" form="">
<input type="radio" name="group1" value="2" form="">
</form>
This still uses the name attribute which is required for radio buttons, and it also leaves the inputs enabled for interaction. No JavaScript code, no during-submit patching of the document in hope that the submit will turn out fine and destroying the document before submit will leave no visible traces.
The form="" attribute indicates that these input elements are not included in their parent form. Actually you're supposed to put the ID of another existing <form> element in this attribute, but then again, by the HTML standard, you're probably not supposed to exclude radio buttons from a form. So this hack is the only solution to the problem. (Doesn't work in Internet Explorer, but what does today.)
I'm intending to use this method for radio button groups that are in a data table which is populated from a <template> element. In this case, there will be a radio group in each table row, so their number is unknown. But since the name attribute is the only way to build radio button groups, they'll need to get counting names assigned. Since the table data is put in a JSON field before submitting anyway, I don't need field names for a form submit. Radio buttons do need names for themselves, but this method will still exclude them from being submitted.