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.
Related
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();
});
How do I force md-select in multiple mode to behave just like
<select multiple required ... >
?
Here is the fiddle, to show what I mean. In this example, my browser doesn't let me submit form without selecting at least 1 option from the select tag.
I want md-select to behave similarly, but I don't know how can I do that - neither putting 'required' attribute nor adding 'ng-require' directive helps.
You can rely on Angular to do the validation for this, rather than the browser. Here's my forked example:
http://codepen.io/anon/pen/rVGLZV
Specifically:
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
To keep the submit button disabled until the form is valid and,
<form novalidate name="myForm">
To name the form and tell the browser not to do its own validation on it.
You could even add some CSS class for ng-invalid to show red around the invalid fields.
EDIT: Make sure you put an ng-model on your <select multiple>, otherwise the required attribute won't work.
If you don't want to disable submit button but instead trigger error when submit button is hit, you can set the $touched property to true to trigger required alert
yourFormName.mdseletName.$touched=true;
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'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.
Here's the html for my button, according to Chrome:
<input checked="" type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default">
When I run this in my javascript console, the output output is "false"
$("input[type=radio]:first").attr("checked")
The actual UI element is visibly not selected. When I run this code, the button becomes visibly selected:
$("input[type=radio]:first").attr("checked", true)
Looking back at the html in Chrome, I see almost exactly the same thing I saw before. The only difference is that "checked" is now at the end of the tag instead of the beginning?
<input type="radio" class="edit bindable" id="communicationAddresses[0].defaultAddress" name="EMAIL.default" checked="">
A bit more information: there is another radio group lower down on the page. When I remove this second radio group, the first acts as expected. They are distinct groups. It is possible to manually select buttons from each one.
What's going on here? Why wasn't the button visibly selected to begin with?
##### EDIT
The button was selected to begin with, but wound up getting deselected due to a bug in some event binding code I was running.
The checked attribute corresponds to the checkbox's default checkedness, not its current checkedness.
In other words, the checked attribute corresponds to the defaultChecked javascript property, and not the checked property.
jQuery's $("foo").attr("checked", true) sets the checked javascript property, but doesn't affect the checked attribute.