We Keep Coding

How do I require an input in a textbox if a certain checkbox is selected?

<form>
<label>Skills</label>
<br>
<br>
<input type="checkbox" id="skill1" name="skill1" value="Javascript">
<label for="skill1"> Extensive knowledge of Javascript</label>
<br>
<br>
<input type="checkbox" id="skill2" name="skill2" value="Python">
<label for="skill2"> Extensive knowledge of Python</label>
<br>
<br>
<input type="checkbox" id="skill3" name="skill3" value="C#">
<label for="skill3"> Extensive knowledge of Networking</label>
<br>
<br>
<input type="checkbox" id="skill4" name="skill4" value="C#">
<label for="skill4"> Extensive knowledge of Data storage fundamentals</label>
<br>
<br>
<input type="checkbox" id="skill5" name="skill5" value="C#">
<label for="skill5"> Extensive knowledge of Security foundations</label>
<br>
<br>
<input type="checkbox" id="skill6" name="skill6" value="C#">
<label for="skill6"> Extensive knowledge of AWS service selection</label>
<br>
<br>
<input type="checkbox" id="skill7" name="skill7" value="C#">
<label for="skill7"> Ability to work in a team</label>
<br>
<br>
<input type="checkbox" id="skill8" name="skill8" value="C#">
<label for="skill8"> 5+ years experience</label>
<br>
<br>
<input type="checkbox" id="skill9" name="skill9" value="C#">
<label for="skill9"> 10+ years experience</label>
<br>
<br>
<input type="checkbox" id="skill10" name="skill10" value="C#">
<label for="skill10"> 20+ years experience</label>
<br>
<br>
<input type="checkbox" id="other" name="other" value="other">
<label for="other"> I have other skills. Please list other skills below.</label>
<br>
<br>
<br>
<label for="subject">Subject:</label>
<textarea id="otherbox" name="subject" placeholder="textarea" style="height:200px"></textarea>
<input type="submit" value="Apply">
</form>
How do I make it so that, if the "other" checkbox is selected, the textbox must be filled out or the form cannot be submitted. I must use JavaScript to do this. Please explain in detail because I'm rather new to JavaScript.

Yes, you can easily achieve this using JavaScript:
HTML:
<input
type="checkbox"
id="other"
name="other"
value="other"
onclick="otherCheckBox()"
/>
(Just add an onclick event to your 'other' checkbox, so that it fires off a function whenever clicked)
JS:
<script>
function otherCheckBox() {
var checkBox = document.getElementById("other"); //Getting the 'other' CheckBox
var otherBox = document.getElementById("otherbox"); //Getting the TextBox
if (checkBox.checked) {
otherBox.required = "true"; //Setting the 'required' parameter to true if checkbox is checked
} else {
otherBox.required = ""; //Setting the 'required' parameter to false if the checkbox is not checked
}
}
</script>
Add this Script tag in your html head.
When fired, This function will check if the checkbox with id other is checked. If it is checked, it will set the required attribute of the textbox with id otherbox to true, and if not checked, it will set it to false.

Disable checkbox on radio button click

I have 2 radio buttons and would like to disable checkboxes in an array if radio button is clicked. Here is some code from a previous post in .net.
I use ASP classic and would appreciate assistance in altering this code or code that would best accomplish my goal.
<input type="radio" name="group" value="value1">
<input type="radio" name="group" value="value2">
This is the checkbox that is in the loop for the array:
<input type="checkbox" name="items" value="<%=Rs("item") %>">
$(document).ready(function () {
$('#<%= rbRadioButton.ClientID %> input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
alert($(this).val());
});
});

How about using the .prop() method.
// Disable checkbox
$("input[value='value1']").change(function() {
$("input[name='items']").prop('disabled', true);
});
// Enable checkbox
$("input[value='value2']").change(function() {
$("input[name='items']").prop('disabled', false);
});
// Trigger reset button click
$("#btnReset").on("click", function() {
$("input[name='group']").prop('checked', false);
$("input[name='items']").prop('checked', false);
$("input[name='items']").prop('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<fieldset>
<legend>radio:</legend>
<input type="radio" name="group" value="value1">disabled
<input type="radio" name="group" value="value2">enabled
</fieldset>
<fieldset>
<legend>checkbox:</legend>
<input type="checkbox" name="items" value="1">
<input type="checkbox" name="items" value="2">
<input type="checkbox" name="items" value="3">
<input type="checkbox" name="items" value="4">
<input type="checkbox" name="items" value="5">
</fieldset>
<input type="button" value="Reset" id="btnReset">

JQuery "onchange" event on just one checkbox among multiple in a group based on label text

I have a group of checkboxes as -
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.
I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.
$("#check_1").change(function() {
alert('Checkbox One is clicked');
});
How do I do this as I have no access to modify the html ?

You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,
$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
alert('Checkbox One is clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>

Looks like your only criteria is the text of the label so you could target the input based on that label like :
$('label:contains("One")').prev('input:checkbox').change(function(){
console.log('One changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Hope this helps.

Remove disable attribute when selecting a radio button

I am sure this has been answered before but I am not able to find what I need. The jsfiddle below is a basic idea of what I am trying to do. I want the user to come to the page and the text/select fields are disabled.
If they select EITHER of the radio buttons in the 'radio' class, I want the disable attribute to be removed from all 3 fields in the 'fields' class. I have tried different onClick events and cannot seem to get it to work but I am not that familar with javascript and jquery.
Can anyone give me an idea of how I can make this happen?
http://jsfiddle.net/q5jqqgnt/
<input class="radio" name="radio" type="radio">Radio 1
<input class="radio" name="radio" type="radio">Radio 2
<br>Field 1
<input class="fields" disabled="disabled" name="field1" type="text">
<br>Field 2
<input class="fields" disabled="disabled" name="field2" type="text">
<br>Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>

you need to remove the disabled attribute with the .removeAttr() function in jQuery
$('.radio').change(function(){
$('.fields').removeAttr('disabled');
});
JSfiddle demo

At its simplest, I'd suggest using prop(), rather than removeAttr():
$('.radio').on('change', function(){
$('.fields').prop('disabled', false);
});
$('.radio').on('change', function() {
$('.fields').prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" disabled="disabled" name="field1" type="text" />
<br />Field 2
<input class="fields" disabled="disabled" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
You could, in compliant browsers, also somewhat emulate the disabled property's presence, and removal, with just CSS:
.radio ~ input.fields {
pointer-events: none;
opacity: 0.4;
background-color: #ccc;
}
.radio:checked ~ input.fields {
pointer-events: auto;
opacity: 1;
background-color: #fff;
}
<input class="radio" name="radio" type="radio" />Radio 1
<input class="radio" name="radio" type="radio" />Radio 2
<br />Field 1
<input class="fields" name="field1" type="text" />
<br />Field 2
<input class="fields" name="field2" type="text" />
<br />Field 3
<select class="fields" disabled="disabled" name="field3" type="select">
<option>Test 1</option>
</select>
Unfortunately, while this works to prevent mouse-interaction (the user cannot focus the fields with via a mouse-click), they can still use the tab button to focus the field and enter text, and, of course, the form-elements would still be considered 'successful' (albeit with potentially empty-values), and would be submitted to the server when the form is submitted.
So, while potentially useful under some very specific circumstances, it's almost certainly not to be used for most situations.
References:
CSS:
pointer-events.
jQuery:
on().
prop().

How to check if all input (text, email, number and radio) of a div are checked?

Looking for a way to enable the submit button of a form when all its inputs are checked/not empty.
I have stumbled upon snippets in both google and other SO questions, where a similar thing is done, but always only for the same type of input, not considering different kinds as it's the case here. Any ideas how to do this?
Below, an example of where I would use such snippet and its link to http://jsfiddle.net/bRKuV/.
P.S Looking for a solution other than the required HTML5 attribute.
EDIT: grouped radios with name attr.
<div id="first">
<form>
<label>Name</label>
<input type="text">
<label>Email</label>
<input type="email">
<label>Age</label>
<input type="number" maxlength="2">
<label>Gender</label>
<input type="radio" name="gender" value="m">Male</input>
<input type="radio" name="gender" value="f">Female</input>
<input type="submit" disabled>
</form>
</div>
<div id="second">
<form>
<label>Question 1</label>
<input type="radio" name="q1" value="y">Yes</input>
<input type="radio" name="q1" value="n">No</input>
<label>Question 2</label>
<input type="radio" name="q2" value="y">Yes</input>
<input type="radio" name="q2" value="n">No</input>
<input type="submit" disabled>
</form>
</div>

Hmm, nothing simpler than this:
$("form").on("change", function() {
$("input").each(function() {
var test = {radio:1, checkbox:1}[this.type] ? $(this).is(":checked") : !!this.value;
if(this.type !== "submit") console.log(test);
});
});
http://jsfiddle.net/bRKuV/3/