We Keep Coding

How to disable my button based on dynamically generated radio buttons

As you can see my radio button ids are dynamic.
I want to disable input type file button if my value value="0" or value="2" radio buttons without affecting other section.
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
....
/*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
<label>Yes</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
<label>No</label>
</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
<label>N/A</label>
</label>
</div>
</div>
I'm loading my form dynamically so my radio button ids are dynamic well. Each section contain input type file button. My input type file id will have the same id that is "Button_select_1" for some reason.

Assuming that there can be more than 1 checkbox/radio button checked at a time throughout the entire collection of elements you need some means by which to distinguish them as a group, otherwise as they are all called the same thing you will only be able to check one at a time. To that end you can remove ID attributes generally as they often cause issues and use a name[x] type syntax for the radio button names. If there are a unlimited possible number of these, dynamically generated, it becomes easy to assign a number ( or unique string ) within the square braces in whatever code generates the sections.
As mentioned by #mplungian, nesting the elements within a common parent ( a section is perfect ) it becomes very easy to process the checking of radio buttons and the required enable/disable of the file input. A delegated event listener, bound to the page in this case, will work regardless of the number of dynamic elements added to the DOM and some very simple code within the event handler will find the file input and disable it if any radio other than the Yes radio is checked. As that is to be the default behaviour and the No is selected by default it makes sense to disable the file input initially.
The name[x] type syntax can also help when processing a large dataset serverside as that x value acts as a key within the array!
document.addEventListener('change',e=>{
if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
let bttn=e.target.closest('section').querySelector('[type="file"]');
bttn.disabled=( parseInt( e.target.value )!==1 );
}
})
body{
counter-reset:sections;
}
section:before{
counter-increment:sections;
content:'Section: 'counter(sections)
}
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[1]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[1]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[1]" type="radio" value="2" /> N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[2]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[2]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[2]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[3]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[3]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[3]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>
<section>
<input type="file" name="files" multiple="multiple" disabled />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input data-val="true" data-val-required="Kindly submit your response" name="AnswerResponse[n]" type="radio" value="1" />Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input checked="checked" name="AnswerResponse[n]" type="radio" value="0" />No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label><input name="AnswerResponse[n]" type="radio" value="2" />N/A</label>
</div>
</div>
</section>

Here is my suggestion
Find the closest static container of all the sections and delegate from there - I made a div with id="container"
wrap each section in a div with class section to be able to navigate to the input from the related radio
Initialise if needed - if the radios may already have been selected from the server
With this code the IDs of the radios and file elements are not needed.
I also removed the nested label which is not valid HTML but this change is not relevant to the question
document.getElementById("container").addEventListener("click", (e) => {
const tgt = e.target;
if (!tgt.matches("[name=AnswerResponse]")) return; // not a radio
tgt.closest(".section").querySelector("[type=file]").disabled = ["0", "2"].includes(tgt.value)
});
// init:
document.querySelectorAll(".section").forEach(section => {
const selectedRad = section.querySelector("input[name=AnswerResponse]:checked");
if (selectedRad) {
section.querySelector("[type=file]").disabled = ["0", "2"].includes(selectedRad.value);
}
})
.section {
border: 1px solid black;
}
<div id="container">
<div class="section">
/*First Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label> <input data-val="true" data-val-required="Kindly submit your response" id="10_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="10_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="10_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Second Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="11_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="11_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="11_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
/*Third Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="16_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="16_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="16_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>
<div class="section">
.... /*nth Section*/
<input type="file" name="files" multiple="multiple" id="Button_select_1" />
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input data-val="true" data-val-required="Kindly submit your response" id="nth_3" name="AnswerResponse" type="radio" value="1" />
Yes</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input checked="checked" id="nth_4" name="AnswerResponse" type="radio" value="0" />
No</label>
</div>
</div>
<div class="col-md-2 mt-15">
<div class="custom-control custom-radio">
<label>
<input id="nth_5" name="AnswerResponse" type="radio" value="2" />
N/A</label>
</div>
</div>
</div>

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});

If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();

Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>

try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});

Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>

Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

jquery remove parent of parent cur.element

hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"

remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>

Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }

Check radio button if

I want to select a radio button depending on an input field. This seems very simple but its not working. Basically a user fills out a form and depending on the state input field, it picks the state tax radio button.
The code below is not firing for some reason, any idea's?
The input field
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" onblur="picktax();" required />
</div>
</div>
The radio button
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
The script
<script>
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} elseif (statevalue == livalue) {
$("#radio3").prop("checked", true)
} elseif (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
</script>
updated, still not firing

Your example shows that you are new to JavaScript so whilst I wouldn't code it quite like this myself here's your code corrected enough to work.
As mentioned in the comments there is no elseif keyword in JS and you must use double or triple equals operator for evaluating.
Nethertheless, you were getting close to something workable.
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} else if (statevalue == livalue) {
$("#radio3").prop("checked", true)
} else if (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" oninput="picktax();" required />
</div>
</div>
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>

As pointed in the comments, your code has some syntax errors. Also, there are a few ways you could improve it, for example I use a switch instead of if. Nothing wrong with if, I'm just providing an example. Fixed code would be:
function picktax() {
var statevalue = $('#state').val();
var radio = $();
switch (statevalue) {
case "NY":
radio = $("#radio2");
break;
case "LI":
radio = $("#radio3");
break;
case "NJ":
radio = $("#radio4");
break;
default:
alert("test");
break;
}
radio.prop("checked", true);
}

How to apply checkValidity() in forms?

I have three column form with 1st column having input fields and next two having checkboxes,if i submit my form without entering anything then an alert appears for 2nd and 3rd column on page top and then alert msg appears for column1. How to use this method here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Study Schedule</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"> </script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="page-header">
<div class="well">
<h1 align="center" style="color:Brown;"><b>Study Schedule </b> </h1>
</div>
</div>
<form>
<div class="container">
<div class="row">
<!--Column 1-->
<div class="col-lg-3 jumbotron">
<div class="form-group">
<span><b>Teacher Name</b></span>
<span class="glyphicon glyphicon-asterisk"></span>
<select class="form-control" required >
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select> </div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
<div class="form-group">
<span><b>Teacher Name</b></span>
<select class="form-control">
<option value="">Select name</option>
<option>Rachna</option>
<option>Sanjay</option>
<option>Seema</option>
<option>Shivani</option>
<option>Roop Singh</option>
<option>Satnaam</option>
<option>Rakesh</option>
<option>Shalini</option>
</select>
</div>
</div>
<div class="col-lg-1">
</div>
<!--Column 2-->
<div class="col-lg-3 jumbotron">
<!--Row 1-->
<div class="row">
<b>Subject</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >S4</label>
<script type="text/javascript">
function validate()
{
var flag=0;
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one subject");
return false;
}
if(flag==1)
{
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one Day");
return false;
}
return true;
}
}
</script>
</div>
</div>
<!--Row 2-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 3-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 4-->
<div class="row">
<b>Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
<!--Row 5-->
<div class="row">
<b> Subject</b>
<div class="input-group">
<label class="checkbox-inline"> <input type="checkbox" value="" >S1</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S2</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S3</label>
<label class="checkbox-inline"> <input type="checkbox" value="" >S4</label>
</div>
</div>
</div>
<div class="col-lg-1">
</div>
<!--Column 3-->
<div class="col-lg-4 jumbotron">
<!--Row 1-->
<div class="row">
<b>Class Days</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
<script type="text/javascript">
function day()
{
var chks = document.getElementsByName('chk[]');
var hasChecked = false;
for(var i=0;i<chks.length;i++)
{
if(chks[i].checked)
{
hasChecked = true;
break;
}
}
if(hasChecked==false)
{
alert("Please select atleast one day");
return false;
}
return true;
}
</script>
</div>
</div>
<!--Row 2-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 3-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 4-->
<div class="row">
<b>Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
<!--Row 5-->
<div class="row">
<b> Class Days</b>
<div class="input-group">
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Mon</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Tue</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Wed</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Thr</label>
<label class="checkbox-inline"> <input name="chk[]" type="checkbox" value="" >Fri</label>
</div>
</div>
</div>
<br>
<br>
<div class="col-lg-10">
<b>Prinicipal Name</b>
<span class="glyphicon glyphicon-asterisk"></span>
<input type="text" class="form-control" placeholder="Enter Name" required>
</div>
<br>
<div class="col-lg-4">
<b>Date of schedule Application</b>
<span class="glyphicon glyphicon-asterisk"></span>
<div class="form-group">
<div class='input-group date' id="datetimepicker1">
<input type='text' class="form-control" required/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datepicker();
});
</script>
</div>
<div class="col-lg-10" align="center">
<div class="row">
<div class ="btn btn-info" role="button">
<input type="Submit" class="btn btn-info" value="Submit" onclick="validate();">
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</form>
</body>
</html>

In validate() function you used 2nd column as initial. Use first column and in submit button give return like this onclick="return validate()"