I am trying to disable some input fields using jQuery 1.4.2. This is a part of the HTML code:
<input type="text" disabled="disabled" name="nume" value="Text" />
This is the Javascript:
$('.salveaza').live('click', function(e){
$.get(ajaxURL, $('form', itemCurent).serialize()+'&id='+itemCurent.data('id')+'&optiune=editeaza-categorie');
// This is the code for disabeling inputs
$('input', itemCurent).attr('disabled', 'disabled');
itemCurent.removeClass('curent');
$('.optiuniEditeaza', itemCurent).remove();
e.preventDefault();
});
The above code doesn't work. Note that the inputs are added with jQuery, that's why I am using live, I tried all sorts of stuff.
I also tried firebug console to disable all input fields on the page and it's not working:
$('input').attr('disabled', 'disabled');
Any help will be apreciated,
Thanks
This should do the trick:
Disable: $('#the-field-id').attr('disabled', true);
Enable: $('#the-field-id').removeAttr('disabled');
Use true instead of disabled:
$("input").attr("disabled", true);
Working example:
http://jsfiddle.net/bEC8L/ (input is set to disable after 5 seconds)
jQuery sets properties instead of attributes if the given attribute is actually a property name, and "disabled" isn't a valid value for the disabled property.
Your piece of code seems ok, so the problem must be coming from another part of code. Put a break on the line where you disable and then run step by step.
Try this code. Onclick of button the textbox will be disabled.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fname").attr("disabled",false);
$("#idDisable").click(function(){
$("#fname").attr("disabled",true);
});
});
</script>
<input type="button" id="idDisable" value="click to disable" name="Click"/>
<input type="text" id="fname" />
Related
I want to disabled the button to send the form until the checkbox is set and i want to solve it with a nice short jQuery Code. But there has to be a bug, nothing happens. Does anyone have an idea?
JS:
$(document).ready(function(){
$('#terms').keyup(function(){
if($('#terms').is(':checked')){
$('#btn').removeAttr('disabled');
}else{
$('#btn').attr('disabled');
}})}
HTML:
<input id="terms" type="checkbox" value="" name="terms">
<input id="btn" name="register" type="button" value="Register" disabled/>
Actually it's really simple:
$('#terms').on("change", function() {
$("#btn").prop("disabled", !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="terms" type="checkbox" value="" name="terms">
<input id="btn" name="register" type="button" value="Register" disabled/>
where the !this.checked is the boolean value of the current checkbox state.
Naturally there's a jQuery way: $(this).is(":not(:checked)") but there's no need to, since you should get used to understand the this environment and the DOM Properties you have available using simple vanilla JS read more.
Use prop() instead of attr:
e.g.
$('#btn').prop('disabled', true);
Properties generally affect the dynamic state of a DOM element without
changing the serialized HTML attribute. Examples include the value
property of input elements, the disabled property of inputs and
buttons, or the checked property of a checkbox. The .prop() method
should be used to set disabled and checked instead of the .attr()
method. The .val() method should be used for getting and setting
value.
Note: You are using keyup instead of the change event for a checkbox.
Note your example can be simplified to just pass a boolean expression for on/off:
$(function(){
$('#terms').change(function(){
$('#btn').prop('disabled', !$(this).is(':checked'));
});
});
I must sincerely thank Darren Davies for his help with the following code from which I have made my test html file.
<html>
<head>
<title>field_enable</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script>
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
</script>
</head>
<body>
<div id='clicker' style='background-color:#FF0000; height:20px; width:50px;'></div>
<br>
<input type='text' disabled></input>
<input type='text' disabled></input>
<input type='text' disabled></input>
</body>
</html>
This works perfectly however my form has a large number if fields within which I need to disable only certain one for various clients. When I apply the code it most certainly activates the fields that I have disabled however it also disables the rest of the fields in the form even though they have no attribute set. My problem now it to work out how to activate only the fields that I have disabled and leave the rest enabled.
If you only want to affect certain fields you could assign those fields a particular class (changeable in this example)
<input type='text' disabled class="changeable" />
and change this line
$('input').each(function() {
to
$('input.changeable').each(function() {
so that it only works on inputs with the given class
It's disabling the other fields because your "if" is telling it to do so. When you use:
if ($(this).attr('disabled'))
when the input doesn't has this attr, it fails the condition so it will disable the input! :)
What you can do to check is:
if ($(this).is("[disabled]") && $(this).attr('disabled')){
// do your stuff here
}
So using elem.is("attr-name") you can know if it has your attr.
Another solution was pointed out by Ivan, you can use classes to diference your inputs.
Cheers
Hi I have coded a Grid view where we have one checkbox and two textbox. My need is that as we make any change in textbox like modify text from 0 to 1, the Checkbox should get automatically checked. This code is in asp.net and this can be done by javascript or Jquery.
Need code to do this activity.
Try this example
Html
<input type="text"/>
<input type="checkbox"/>
Script
$('input[type="text"]').keypress(function(){
$('input[type="checkbox"]').attr("checked","checked");
});
Working demo
This will be Better answer of this question.. I initially debug by help of Manoj. Thanks again.
HTML
<input type="text" id="selector"/>
<input type="checkbox" id="myCheckbox"/>
SCRIPT
$('#selector').change(function () {
$('#myCheckbox').prop('checked', true); // Checks it
alert($('#selector').val());
});
Actually I'm trying to set focus on text-box when focus is lost.The reason behind this is that there is requirement to forcefully set focus on text-box if some validation fails(like empty field validation) and validation is perform on blur event of that text box.
I have tried it on fiddle also but it seems like focus is there but cursor is not blinking.
Please refer link : http://jsfiddle.net/zHeJY/
Please let me know the reason behind this and solution for same.
Thanks in advance.
First: This is a bad idea to trap user inside an input unless validation passes! Users should be allowed to focus whatever they want. Ideally, you can prevent a form submission if validation fails.
Problem: (1) You don't have any other element in the fiddle you provided. (2) You are not validating anything, just doing an endless loop for blur-focus cycle!
Solution:
See this fiddle: http://jsfiddle.net/zHeJY/7/
With a proper validation routine in place (and another element available), it will work.
HTML:
<input id="setFocus"/>
<input id="other" />
JS:
$("#setFocus").on("blur", function(e) {
if (! validate(this)) {
$(this).focus();
}
});
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('blur', "#setFocus", function (e) {
$(this).focus();
});
});
</script>
</head>
<body>
<input type="text" id="setFocus"/>
<input type="text" id="set"/>
</body>
</html>
try this
HTML
<div id="something">
<input type="text" id="setFocus"/>
<input type="text" id="setFocus1"/>
</div>
JS
$("#something").mouseup("blur",function(){
$(this).children(":first").focus();
})
you should have parent element for this on click of any where you will get the required result
I have a website form where I have fields that I want to be required (with JQuery Plugin) only when the check-box is checked.
So far I wrote JavaScript that works if the the check-box is not checked, or checked. But when a user checks the check-box and then unchecks it the code does not work (field is still mandatory when unchecked).
Also one other bug is for some reason this same code only works for updating only one items required boolean. For example if I have the same code but make it so two elements requirements are updated the script does not work at all.
Here is the relevant source code:
<script>
function swap(){
if(document.getElementById('must').checked){
document.getElementById("element1").setAttribute("required", "true");
}else{
document.getElementById("element1").setAttribute("required", "false");
}
}
</script>
<form>
<input type="checkbox" onclick="swap();" id="must" name="must" value="1" style="width:10;">
<input id="element1" type="text" name="element1" placeholder="Enter Value" >
<input type="submit" id="submit" name="submit" value="Send" >
</form>
Any assistance would be greatly appreciated.
Best way I know to check if checkbox is checked, it to use jQuery is() method (documentation). It handles x-browser differences for you. Also best way to add attribute to HTML element is to use attr() method.
if($("#must").is(":checked")) {
$("#element1").attr('required', 'required');
} else {
$("#element1").removeAttr();
}
You can check in DOM inspector that attribute is added.
Required attribute documentation is here.
Try this, in xhtml we specify required="required" and there no required="false", a better way is to remove attribute required on else
<script type="text/javascript">
function swap(){
if(document.getElementById('must').checked){
document.getElementById("element1").setAttribute("required", "required");
}else{
document.getElementById("element1").removeAttribute("required");
}
}
</script>
The required attribute is a boolean attribute, it presence means that the field is required and its absence means the field isn't required. It has only 3 valid forms 1. required alone by itself 2. required="" equal to an empty string 3. required="required"