Develop Reference

set input as readonly in javascript

I am currently trying to create a JS method which sets a specific input field as readonly if another field contains a value inside it but i am having issues with getting it to work.
$(document).ready(function(){
const priceInputs = $('.price input');
priceInputs.change(function(){
if($(this).val() === ''){
$(this).parents('.price').find('input').attr('readonly', false);
$(this).attr('readonly', false);
}else{
$(this).parents('.price').find('input').attr('readonly', true);
}
});
});
but when i load a record which contains a value inside it the other field isn't automatically set to readonly
anyone got any ideas?

Use each loop for class elements.
$('.price').each(function() {
$(this).change(function() {
console.log(this.value)
if (this.value === '') {
$('input[type="text"], textarea').attr('readonly', false);
} else {
$('input[type="text"], textarea').attr('readonly', 'readonly');
this.readOnly = false;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" class="price" />
<input type="text" name="input2" class="price" />

For changing the readonly property you should use prop() like below:
$("#name").prop('readonly', false);

jquery toggling checked attribute of checkbox not triggering change event

I want to perform some actions when the div inside which a checkbox is, is clicked. This is how I change the checked attribute of the checkbox:
$(".crinbox").click(function () {
var cbox = $('input[value="crin"]');
if (!cbox.checked) {
cbox.attr("checked", true);
} else if (cbox.checked) {
cbox.attr("checked", false);
}
});
And this is how I handle the change,
$('input[value="crin"]').on("change", function () {
if (!this.checked) {
$(".crin").hide();
$('input[name="crin"').attr("value", "");
} else if (this.checked) {
$(".crin").show();
}
});
However, I am not able to trigger the on change function for the checkbox, all this does is check the checkbox, also, I can not uncheck the checkbox once I check it with this function.
HBS :
.crin (div to hide and show):
<div class="crin selectt" style="{{#if check.crinChecked}}display:block{{else}}display:none{{/if}}">
<input type="text" name="crin" value="{{fields.crin.[0]}}">
<input type="text" name="crin" value="{{fields.crin.[1]}}">
{{#if check.crinChecked}}{{#if fields.crinPartError}}<p style="color:red" class="error">
{{fields.crinPartError}}
</p>
{{/if}}{{/if}}
</div>
checkbox and its div:
<div class="dabba crinbox">
<input type="checkbox" name="events" value="crin" {{#if check.crinChecked}}checked{{/if}}>
<p> Create-in </p>
</div>

You can add :
cbox.trigger("change");
So :
$(".crinbox").click(function () {
var cbox = $('input[value="crin"]');
if (!cbox.checked) {
cbox.attr("checked", true);
cbox.trigger("change");
} else if (cbox.checked) {
cbox.attr("checked", false);
cbox.trigger("change");
}
});

Something like this?:
there was couple of things wrong with your code logic. I can explain what if this is even wanted result. But I am still confused what are you trying to achieve.
$(".crinbox").click(function () {
var cbox = $('input[name="crin"]');
if (!cbox.is(':checked')) {
cbox.attr("checked", true);
} else if (cbox.is(':checked')) {
cbox.attr("checked", false);
}
});
$('input[name="crin"]').bind("DOMSubtreeModified", function() {
var cbox = $('input[name="crin"]');
if (!cbox.is(':checked')) {
$(".crin").hide();
$(cbox).attr("value", "");
console.clear();
console.log(cbox.val());
}
if (cbox.is(':checked')) {
$(".crin").show();
$(cbox).attr("value", "crin");
console.clear();
console.log(cbox.val());
}
console.log("changed");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="crinbox">test crinbox click<br>
<input type="checkbox" name="crin" value="crin"> <br>
<div class="crin">test crin<br>
</div>

if checkbox check but input empty disable another checkbox

i have one chekbox and one textfield
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<input class="form-control" type="text" id="usr_zipcode" maxlength="10" name="usr_zipcode" required="required">
how to make jquery, when vehiche1 is check but usr_zipcode is empty or no value, it disable another checkbox , name checkme :
<input type="checkbox" id="checkme">
i try to use below code but not working
$('#vehicle1').change(function () {
var input1 = $('#usr_zipcode');
input1.change( function() {
var empty = ( input1.val() == '' );
$("#checkme").prop('checked', false);
$("#checkme").attr('disabled','disabled');
});
}).change();

create a separate function to check or disable another checkbox like below
function checkOrDisableAnotherCheckBox() {
if($('#vehicle1').is(':checked') && $('#usr_zipcode').val() == ''){
$("#checkme").attr('disabled', true);
} else {
$("#checkme").removeAttr('disabled');
}
}
$('#vehicle1').change(function () {
checkOrDisableAnotherCheckBox();
});
$('#usr_zipcode').keyup(function () {
checkOrDisableAnotherCheckBox();
});

You can try my code:
$('#vehicle1').change(function () {
checkEmpty();
});
function checkEmpty(){
var empty = ( $('#vehicle1').prop('checked') && $('#usr_zipcode').val() == '' );
if (empty) {
$("#checkme").prop('checked', false);
$("#checkme").attr('disabled','disabled');
}else {
$("#checkme").removeAttr("disabled");
}
}
This is a demo: https://codepen.io/phuongnm153/pen/zQavrN

Prevent text entry in textbox unless checkbox is checked

I'm trying to prevent text from being entered in a textbox unless a checkbox that corresponds with the textbox is checked.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
isOther.addEventListener("input", function (evt) {
// Checkbox must be checked before data can be entered into textbox
if (isOther.checked) {
document.getElementById("other").disabled = false;
} else {
document.getElementById("other").disabled = true;
}
});

Do not use disabled. Instead use readonly. During document load, uncheck and disable the inputs:
<input type="checkbox" id="isOther" />
<input type="text" id="other" readonly />
And use this script.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
other.readOnly = !isOther.checked;
});
other.addEventListener("focus", function (evt) {
// Checkbox must be checked before data can be entered into textbox
other.readOnly = !isOther.checked;
});
Longer version.
// Validate "Other" textbox
var isOther = document.getElementById("isOther");
var other = document.getElementById("other");
isOther.addEventListener("click", function () {
if (isOther.checked) {
other.readOnly = false;
} else {
other.readOnly = true;
}
});
other.addEventListener("focus", function (evt) {
// Checkbox must be checked before data can be entered into textbox
if (isOther.checked) {
this.readOnly = false;
} else {
this.readOnly = true;
}
});
Fiddle: http://jsfiddle.net/praveenscience/zQQZ9/1/
Fiddle: http://jsfiddle.net/praveenscience/zQQZ9/

My solution uses jQuery library. Here's a fiddle: http://jsfiddle.net/8LZNa/
Basically I'm disabling the input on page load:
<input name="isOther" type="checkbox" id="isOther" /><br />
<input type="text" id="other" disabled/>
... and when isOther changes it will make sure it is checked, and change the state to enabled. Or change back to disabled.
$('input[name=isOther]').change(function(){
if($(this).is(':checked')) {
$("#other").removeAttr('disabled');
}
else{
$("#other").attr('disabled','disabled');
}
});

You can do this:
document.getElementById( 'isOther' ).onChange = function(){
document.getElementById("other").disabled = !this.checked;
};

Without the use of jQuery or disabled property:
HTML
<input type="checkbox" id="x" value="Enable textbox" onclick="test(this);" />
<input type="text" id="y" readonly />
JAVASCRIPT
function test(checkbox) {
if(checkbox.checked) {
document.getElementById('y').readOnly = false;
}
else {
document.getElementById('y').readOnly = true;
}
}

JQuery Button disabled on click after being enabled in reference to values in form fields

I am very new to JQuery: I am a little perplexed to ask but asking is better than the alternative:
I am trying to disable a button but enable it when something is in the field/textbox.
This is simply experimental, just getting my feet wet here.
Alternatively I could disable the button on windows load or apply the attribute directly on the form element.
$(document).ready(function() {
$('#btnSubmit').attr('disabled', true);
$('#myForm :input').blur(function(){
if($('#myField').val() == '')
{
$('#btnSubmit').attr('disabled', true);
}
else
{
$('#btnSubmit').attr('disabled', false);
}
});
});
The problem is after I enter a value and leave the field the button is enabled but as soon as I click the button it is disabled again:
What am I missing?
Thanks my friends.

It is because the button is also considered an input field.
Try
$('#myForm :input:not(:button)').
Demo: Fiddle
Also use .prop() instead of .attr() to set disabled state

try using this:
$('#btnSubmit').attr('disabled', 'disabled'); // to disable buttons
$('#btnSubmit').removeAttr('disabled'); // to enable them

Try this one, this should work
HTML sample
<input type = "text" id = "txt1">
<button class = "btnSubmit">Submit</button>
And the jquery
$(".btnSubmit").attr("disabled", "disabled");
$("#txt1").keyup(function() {
if(jQuery.trim($(this).val()) != '') {
$('.btnSubmit').removeAttr('disabled');
}
});

$('#myForm:input').on('keyup' , function() {
if($.trim($('#myField').val()).length > 0){
$('#btnSubmit').prop('disabled', false);
}
else {
$('#btnSubmit').prop('disabled', true);
}
});
*This would work. Please try*

You can try this,onkeyup check if the textbox is empty is so disbale the button , else enable the button.
HTML:
<form id="myForm">
<input id="myField" type="text"/>
<input id="btnSubmit" value="hi" type="button"/>
</form>
jQuery:
$(document).ready(function() {
//Load with button disabled,since the value of the textbox will be empty initially
$('#btnSubmit').attr('disabled', true);
//onkeyup check if the textbox is empty or not
$('#myForm input[type="text"]').keyup(function(){
if($('#myField').val() == '')
{
$('#btnSubmit').prop('disabled', true);
}
else
{
$('#btnSubmit').prop('disabled', false);
}
});
});
$(document).ready(function() {
$('#btnSubmit').prop('disabled', true);
$('#myForm input[type="text"]').keyup(function(){
if($('#myField').val() == '')
{
$('#btnSubmit').prop('disabled', true);
}
else
{
$('#btnSubmit').prop('disabled', false);
}
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input id="myField" type="text"/>
<input id="btnSubmit" value="hi" type="button"/>
</form>