Develop Reference

How to enable/disable next input field

I am trying to enable disable very next input field with check uncheck of a closest checkbox.
I tried the following script.
$(document).on('change', '.check:checkbox', function(){
if (this.checked) {
$(this).next().prop('disabled', false);
}else{
$(this).next(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

As your HTML stands, .next() points to the label element.
You should first target the closest div then find the respective element from that div element:
$(this).closest('div').find('.inputs')
$(document).on('change', '.check:checkbox', function(){
var currentEl = $(this).closest('div').find('.inputs');
if (this.checked) {
currentEl.prop('disabled', false);
}else{
currentEl.prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class"three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

$(this).next() is the <label>, and next after that is <br>.
Use .nextAll() to get all the following siblings that match a selector, and .first() to get the first one of these.
$(document).on('change', '.check:checkbox', function() {
let nextinput = $(this).nextAll(".inputs").first();
nextinput.prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

You should change the <label>, wrapping the checkbox. This will improve the user experience. Then change the jQuery selector to $(this).closest("div").find(".inputs") in order to address the right input element.
$(document).on('change', '.check:checkbox', function(){
$(this).closest("div").find(".inputs").prop('disabled',!this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class"one">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="a">
</div>
<div class"two">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="b">
</div>
<div class"three">
<label><input type="checkbox" class="check">
Enable/Disable</label><br>
<input type="text" class="inputs" disabled value="c">
</div>

You are almost there. next() element is not input, it's label so why your code is fail. You can increase the next()(next().next()...) until you find proper element.
There are several way to find desire input to enable/disable. If your DOM is not changeable and there are only 1 sibling input use siblings('input').
Example:
$(document).on('change', '.check:checkbox', function() {
if (this.checked) {
$(this).siblings('input').prop('disabled', false);
} else {
$(this).siblings(".inputs").prop("disabled", true);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "one">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "two">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>
<div class "three">
<input type="checkbox" class="check">
<label> Enable/Disable</label><br>
<input type="text" class="inputs" disabled>
</div>

Append error message only when radio button is not checked on button click

I am trying to show an error if a user presses submit and doesn't check one of the radio buttons. That part works fine. Now, my issue is that even when the radio button is checked and the user presses the button.. the error shows right before the form submits. Why is that error showing when the radio button is checked? Any help will be appreciated.
HTML:
<form action="javascript:void(0);">
<input type="submit" class="add-cart " value="Add">
<br />
<p class="option-name">Size : </p>
<input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" />
<label class="label" for="product1">Small</label>
<input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" />
<label class="label" for="product3">Medium</label>
<input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" />
<label class="label" for="product4">Large</label>
<input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" />
<label class="label" for="product5">X-Large</label>
</form>
JS:
$(document).ready(function() {
var count = 0;
$(".add-cart").click(function() {
if (!$("input[name='options']").is(':checked') && count <= 0) {
$(".option-name").append("<p class='option-error'>This field is required</p>");
count++;
}
});
});
JSFiddle Demo

You're not currently resetting between uses, here's a new version:
$(document).ready(function() {
$(".add-cart").click(function() {
$(".option-error").html("");
if (!$("input[name='options[]']:checked").val()) {
$(".option-error").html("This field is required");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:void(0);">
<input type="submit" class="add-cart " value="Add">
<br />
<p class="option-name">Size : <p class="option-error"></p></p>
<input type="radio" required="required" aria-required="true" id="product1" value="1" name="options[]" />
<label class="label" for="product1">Small</label>
<input type="radio" required="required" aria-required="true" id="product3" value="3" name="options[]" />
<label class="label" for="product3">Medium</label>
<input type="radio" required="required" aria-required="true" id="product4" value="4" name="options[]" />
<label class="label" for="product4">Large</label>
<input type="radio" required="required" aria-required="true" id="product5" value="5" name="options[]" />
<label class="label" for="product5">X-Large</label>
</form>

how to get value from selected radio button

sir, i have a form input like input text and radio button.
how to get the value of selected radio button, and put that value to the input type text.
heres jsfiddle, https://jsfiddle.net/czw71dfk/2/
<div id="gender" class="form-inline">
<div class="form-group">
<label for="">I Sign up as</label>
<input #id="place" type="text" class="form-control" readonly/>
<div class="radio-inline">
<label class="label_item" for="radioMale">
<input type="radio" class="radio_item" value="male" name="gender" id="radioMale">
</label>
<p class="text-center colorGrey">Male</p>
</div>
<div class="radio-inline">
<label class="label_item" for="radioFemale">
<input type="radio" class="radio_item" value="female" name="gender" id="radioFemale">
</label>
<p class="text-center colorGrey">Female</p>
</div>
<div class="radio-inline">
<label class="label_item" for="radioKids">
<input type="radio" class="radio_item" value="Kids" name="gender" id="radioKids">
</label>
<p class="text-center colorGrey">Kids</p>
</div>
</div>
</div>
$('#gender input').on('change', function() {
var gender = $( this ).val();
$("#place").val( gender );
});

HTML problem #id="place",
And must be using on change;
$(document).ready(function(){
$('input[name=gender]').on('change', function() {
var gender = $( this ).val();
$("#place").val( gender );
});
});
JSFiddle.net Example

Change #id="place" To id="place" https://jsfiddle.net/czw71dfk/4/
<input #id="place" type="text" class="form-control" readonly/>
To
<input id="place" type="text" class="form-control" readonly/>

how to enable textbox ,when uncheck a checkbox using javascript

I have 5 teachers names and corresponding checkboxes(5) I am using checkall function to check all check boxes.
now I want ,when I uncheck a checkbox now enable a textbox at right side.
how to create a textbox from unchecked function using javascript?
my code is :
HTML + PHP :
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group{{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">{{$teacher->tname}}:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>
JAVASCRIPT :
$("#checkFull").click(function() {
$(".check").prop('checked', $(this).prop('checked'));
});
what is the javascript code to enable textbox?

function changeTextBoxFormCheckBox($elm){
var $textBox= $elm.closest(".form-group").find("input[type='text']");
if($elm.is(":checked")){
$textBox.attr("disabled",true);
}else{
$textBox.attr("disabled",false);
}
}
$(".checkbox").each(function(){
changeTextBoxFormCheckBox($(this));
})
$("#checkFull").click(function () {
var checkAllProp= $(this).prop('checked');
$(".checkbox").each(function(){
var $this=$(this);
$this.prop('checked', checkAllProp);
changeTextBoxFormCheckBox($(this));
})
});
$(".checkbox").click(function () {
changeTextBoxFormCheckBox($(this));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="check form-control" id="checkFull">
<div class="form-group {{ ($errors->has('check')) ? 'has error' : '' }}">
<label for="check" class="col-sm-4 control-label">tname:</label>
<div class="col-sm-4">
<input type="hidden" id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" value="0">
<input id="{{$teacher->user_id}}" name="{{$teacher->user_id}}" type="checkbox" value="1" class="check form-control checkbox">
</div>
<div class="col-sm-4">
<input type="text" class="textBox">
</div>
</div>

Format your html code as I mentioned. You can do change as per your need
$(document).on('change', '[type=checkbox]', function() {
if ($(this).is(":checked")) {
$("#textBox1").attr("disabled", "disabled");
} else {
$("#textBox1").removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" class="teacherCheck" name="teacherCheckName1" type="checkbox" value="1" class="check form-control">
<input id="teacherCheck_2" class="teacherCheck" name="teacherCheckName2" type="checkbox" value="1" class="check form-control">
</div>
<div class="col-sm-4">
<input type="text" id="textBox1">
</div>
</div>

$(document).on('change', '[type=checkbox]', function() {
var val = $(this).data('value');
if ($(this).is(":checked")) {
$("#textBox"+val).attr("disabled", "disabled");
} else {
$("#textBox"+val).removeAttr("disabled");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-4 teacherContent">
<input type="hidden" id="teacherId1" name="teacherName1" value="0">
<input type="hidden" id="teacherId2" name="teacherName2" value="1">
<input id="teacherCheck_1" data-value="1" name="teacherCheckName1" type="checkbox" class="check form-control">
<input type="text" id="textBox1">
<input id="teacherCheck_2" data-value="2" class="teacherCheck" name="teacherCheckName2" type="checkbox" class="check form-control">
<input type="text" id="textBox2">
</div>
</div>

jQuery can only read select option once?

I think I may have found a bug I can't work around.
JSfiddle
I have an HTML dropdown with some html5 data. On change the jquery should find the selected option and pull the data from that option, then check some boxes.
I don't know how else to explain it except goto the jsfiddle and try it. The first option should check the first half of boxes and the second option should select all the checkboxes.
I hope someone here can tell me what I'm doing wrong. Be sure to change the select box 3-4 for interesting behavior.
Best,
Ryan
HTML
<h2>Features</h2>
<div class="form-group">
<div class="col-md-12 required">
<label for="feature_groups">Feature Group(Quick Select)</label>
<select name="feature_groups" class="form-control" id="feature_groups">
<option value="">Select One</option>
<option data-group='3,4,7,8'>2reg</option>
<option data-group='1,2,3,4,5,6,7,8'>fg1</option>
</select>
</div>
</div>
<label for="Features">Features</label>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][4][feature_id]" value="4" class="feature_checks" id="Feature4FeatureId" />
<label for="Feature4FeatureId">Aux Input</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][3][feature_id]" value="3" class="feature_checks" id="Feature3FeatureId" />
<label for="Feature3FeatureId">Bose Stereo</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][8][feature_id]" value="8" class="feature_checks" id="Feature8FeatureId" />
<label for="Feature8FeatureId">Electric Stabailzers</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][7][feature_id]" value="7" class="feature_checks" id="Feature7FeatureId" />
<label for="Feature7FeatureId">Electric Suspension Adjustment</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][6][feature_id]" value="6" class="feature_checks" id="Feature6FeatureId" />
<label for="Feature6FeatureId">Floor Mats</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][2][feature_id]" value="2" class="feature_checks" id="Feature2FeatureId" />
<label for="Feature2FeatureId">Gold plated rims</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][1][feature_id]" value="1" class="feature_checks" id="Feature1FeatureId" />
<label for="Feature1FeatureId">Latches</label>
</div>
<div class="input checkbox">
<input type="checkbox" name="data[Feature][5][feature_id]" value="5" class="feature_checks" id="Feature5FeatureId" />
<label for="Feature5FeatureId">Premium Rims</label>
</div>
JS
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').attr('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").attr('checked', true);
}
}
});
});

It is the same old attr() vs prop() issue....
Use .prop() to set the checked state instead of .attr()
$(document).ready(function () {
$('#feature_groups').change(function () {
console.log($('option:selected', this));
$('.feature_checks').prop('checked', false);
if ($('#feature_groups option:selected') != '') {
var arrData = $('option:selected', this).data('group').split(',');
for (i in arrData) {
$(".feature_checks[value='" + arrData[i] + "']").prop('checked', true);
}
}
});
});
Demo: Fiddle