I have the following template
and it works fine. The daterange is disabled. But if I remove these inline "disabled" attributes and if I want to disable/enable it via the button click programmatically, it doesn't work even though "disabled" attribute will be added into the elements.
How can I do this?
Use property binding syntax instead of using toggleAttribute:
Something like this:
<kendo-dateinput ... [disabled]="somePropertyOnYourComponent" ></kendo-dateinput>
And then in test:
test() {
...
somePropertyOnYourComponent = true;
}
The approach with property binding works fine but if for whatever reason you want to use plain JS (TS) you need to disable/enable 4 elements (2 kendo-dateinput and 2 autogenerated by kendo internal inputs)
Related
I use span elements like button and I disable and enable it depending on bussnies condition using old JS code like this:
document.getElementById('lblChecks').disabled = false/true
in HTML
<span id="lblChecks" disabled="disabled" class="GridHeader" onclick="ChecksPoPuP();" style="display:inline-block;color:White;height:19px;width:132px;cursor: hand;">Cheques</span>
In CSS I use .GridHeader[disabled="disabled"] but it doesn't work on chrome, but it works fine on IE.
So how can I filter (.disabled) as dynamic property in CSS
Note: the problem can be solved easily using addClass and removeClass in JQuery but I have a lot of files and its hard to replace all of them
You can define a common class name for all the elements which is disabled/enabled back and forth, and use CSS to style it.
For example:
.att-disabled:disabled{ // style goes here }
Refer more:
https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled
I have written the following line to add an disable attribute to an element in angular
angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');
but it is not working and throwing an error:
angular.element(...).setAttribute is not a function
angular.element returns a jQuery/jQuery lite wrapped element, not the raw DOM element.
You can set it using jQuery methods:
angular.element(document.getElementsByClassName("pit")).attr('disabled', true);
This is not really the angular way though. Consider adding a service to provide values to ng-disabled, or directive to manage the disabled state.
angular.element returns a jQuery or jqLite Object, both has an attr() function that you can use instead, so:
instead of:
angular.element(document.getElementsByClassName("pit")).setAttribute('disabled');
you should write:
angular.element(".pit").attr('disabled', 'disabled');
Angular has built in jQuery, so you could just add
$(".pit").attr('disabled', true);
angular.element(document.querySelector(".pit")).setAttribute('disabled',true);
This statement will work only if the element is an input type
angular.element(document.getElementsByClassName("pit")).attr('disabled', true);
Or use ng-disabled directive. this is the best way to disable an element in angular.
I'm dynamically adding some fields that I'd like to be tag fields.
I'm using bootstrap.tagsinput
Any inputs marked with data-role=tagsinput in the original document turn out just fine. However, if I add any more using jQuery for instance,
How do I apply bootstrap.tagsinput to them?
I just did:
$('#input-tags').tagsinput('destroy');
$('#input-tags').tagsinput();
This worked without having to add and remove all tags.
I have a modal form that is generated using bootstrap 3. It doesn't look like there is a reliable way to determine when that form is being shown onscreen. I am attempting to create one. I attached two events to my DOM element that signal when it is shown and when it is hidden.
jq_modal_login_form = $('#modal-login-form')[0]
jq_modal_login_form.on('shown.bs.modal', function () {
jq_modal_login_form.active_onscreen = true;
});
jq_modal_login_form.on('hidden.bs.modal', function () {
jq_modal_login_form.active_onscreen = false;
});
I tried to give an attribute named active_onscreen to the DOM element above. When I look at the DOM element in the debugger later, the attribute is not present.
I should mention that I am VERY new to javascript. Is attribute even the right word to use here? It looks like attribute is a bit of a misnomer as well. It could be an attribute of the object but could also be an attribute of the object.attributes attribute, right? I assume the later is where styling ect., goes and is not what I want to change. Does anyone have some insight as to what I should be doing here?
In jQuery:
$('selector').attr('attribute_name', 'value');
However, you can should only use predefined attributes as creating custom attributes requires additional setup (see this question) that is not necessary in your case.
In your case, you may just want to add a active_onscreen class to the element. Classes are meant to be used to identify elements (and not just for CSS), so they are perfect for this applicaiton. You would use this to add a class to an element:
$('selector').addClass('active_onscreen').
When it is no longer active, you would use this to remove the class:
$('selector').removeClass('active_onscreen').
What you are doing here is adding a property of the DOM object - not an attribute of the element.
Adding an attribute does not necessarily make the property mirror it. Only built-in properties do this.
If you want to set an attribute, but not the property, you can use jQuery's .attr() method.
If you just want to see if a given modal is open, Bootstrap does that for you. You can check the bs.modal data attribute:
$("element").data('bs.modal').isShown;
or a class (but this method is prone to race conditions):
$('#myModal').hasClass('in');
I'm using the following code to loop through all the checkboxes in my form. The boxes are gerenated dynamicaly from a php script so I won't know the names or the number of check boxes.
I need to find out which checkboxes have been ticked so I only pass those ones to the php script that handles the form.
$("#panelform input:checkbox").each(function () {
if(this.is(":checked")){
fields = fields+"&"+this.name+"="+this.value;
}
});
When the script gets to the this.is(":checked") it errors but being jquery my console doesn't show me any error messages just stops.
if I alert or console.log "this" after the first line I get the form field so I know that that much works.
try with
if($(this).is(":checked")){
since this is just a reference to the node in the DOM (and you need instead to use the jQuery wrapper to chain the method is().
Try this:
if( this.checked)
this is the plain DOM node, checked is its property to tell you if it's checked or not. Creating a whole new jQuery object just to see if a property is set is redundant.
In that contect, this refers to the DOM element, not the jQuery object - and DOM elements have no method is(). You can wrap it in a jQuery object if you want to use is method:
if($(this).is(":checked")){
or use the DOM Element's checked property:
if(this.checked){
$(this).is(':checked')
if you want to serialize your form try this
$('your-form-selector').serializeArray()