Checkbox checked works only once

Checkbox checked works only once - javascript

Message sending form, the customer has to select at least one of the alternatives (mail, SMS).
Send button would be disabled if none is selected and activate if one or both selected
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", "disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The issue is because your current logic does not deal with checkboxes being re-checked.
You can solve the problem by inverting the logic so that the disabled property is updated on every checkbox change, and is determined by the length of the checked boxes:
var $checkboxes = $('.form-check-input').change(function() {
$('#send').prop('disabled', function() {
return $checkboxes.filter(':checked').length == 0;
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can do it like this:
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
This will disable the button if none of the checkbox are checked.
Demo
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").prop("disabled", ($('.form-check-input:checked').length == 0 ? true : false));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">
E-post
</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">
SMS
</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>

You never enable the button again. There is just a disable instruction.
I would disable it by default at beginning and then enable it if any of the checkboxes is checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$("#send").attr("disabled", "disabled");
$(this).each(function() {
if ($(this).is(':checked')) {
$("#send").removeAttr("disabled");
}
});
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function() {
$('.form-check-input').change(function() {
let hasChecked = false;
$('.form-check-input').each(function() {
if ($(this).is(':checked')) {
hasChecked = true;
}
});
$("#send").attr("disabled", !hasChecked);
});
});
<div>
<div class="row">
<div class="col-md-12 form-check">
<div>
<input class="form-check-input" type="checkbox" value="" id="Epost" checked>
<label class="form-check-label" for="E-post">E-post</label>
</div>
<div>
<input class="form-check-input" type="checkbox" value="" id="SMS">
<label class="form-check-label" for="SMS">SMS</label>
</div>
<br>
<button id='send'>Send</button>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Correct your logic. Once disabled you are not enabling again when checked.
$(document).ready(function() {
$('.form-check-input').change(function() {
$(this).each(function() {
if (!$(this).is(':checked')) {
$("#send").attr("disabled", true);
}else{
$("#send").attr("disabled", false);
}
});
});
});
Blockquote

Related

Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery

I have no idea how to hide / show checkboxes depending on the choice based on the data-attribute (data-profession attribute).
Code: https://codepen.io/caqoga/pen/RwQyRaQ
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div>
<div>
<h2>Select profession</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary</h2>
<div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1" checked="">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_2">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3">
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
</div>
</div>
$( document ).ready(function() {
$('input[name="profession"]').change(function(){
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
}
})
$('input[name="salary"]').change(function(){
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
}
})
});
And now I would like to compare the data-profession in both inputs, if it is equal to or differs - depending on the .change - displaying or hiding the entire checkbox.
In this case, I would like only EUR 1000 and EUR 1500 for the Security Guard, and only EUR 3500 for the Welder.
Something like below:
$('input[name="profession"]').change(function(){
var idprof=$(this).attr('data-profession');
var idsalarytoprof=$('input[name="salary"]').attr('data-profession');
if (idprof == idsalarytoprof) {$('.proffesion_' + idsalarytoprof).show();}
else {$('.proffesion_' + idsalarytoprof).hide();}
});
$('input[name="profession"]').trigger('change');
Thank you for your help.

2 ways for requirement of you :
Disable input of other profession (unchecked)
Hide input of other profession (unchecked)
Code same as :
$('.example-1 input').change(function(){
let profession = $(this).data('profession')
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
$('.' + profession).find('input').attr('disabled',false)
$('.' + profession).siblings(':not(.' + profession + ')').find('input').attr('disabled',true).prop('checked', false)
}
})
$('.example-2 input').change(function(){
let profession = $(this).data('profession')
if (!$(this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).parent().siblings().find('input').prop('checked', false);
$('.' + profession).removeClass('hide').find('input').attr('disabled',false)
$('.' + profession).siblings(':not(.' + profession + ')').addClass('hide').find('input').attr('disabled',true).prop('checked', false)
}
})
.example-2 .hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="example-1">
<h2>Select profession</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_1" id="profession1" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_2" id="profession2">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary</h2>
<div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_1" id="salary1">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_1">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_1" id="salary2">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_2">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_2" id="salary3" disabled>
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
<div class="example-2">
<h2>Select profession examle 2</h2>
<div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="1" data-profession="profession_11" id="profession11" checked="">
<label class="form-check-label" for="profession1">Security guard</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="profession" value="2" data-profession="profession_21" id="profession21">
<label class="form-check-label" for="profession2">Welder</label>
</div>
</div>
<h2>Expected salary examle 2</h2>
<div>
<div class="form-check profession_11">
<input class="form-check-input" type="checkbox" name="salary" value="1" data-profession="profession_11" id="salary11">
<label class="form-check-label" for="salary1">1000 EUR</label>
</div>
<div class="form-check profession_11">
<input class="form-check-input" type="checkbox" name="salary" value="2" data-profession="profession_11" id="salary21">
<label class="form-check-label" for="salary2">1500 EUR</label>
</div>
<div class="form-check profession_21 hide">
<input class="form-check-input" type="checkbox" name="salary" value="3" data-profession="profession_21" id="salary31">
<label class="form-check-label" for="salary3">3500 EUR</label>
</div>
</div>
</div>
</div>

trying to validate my radiobuttons. Can someone help me on my way?

I have struggeling with my problem for days now and cant find a solution.
Im trying to validate my Radiobuttons, when i submit the form i want it to validate if the radio buttons is empty and then add a is-invalid class from bootstrap, and if some of the buttons are checked i want it to add Class is-valid. When i submit the form right now it only adds class is-invalid.
HTML
<fieldset class="form-group col-md-6">
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
JavaScript
if(checkCheckBoxen.checked == true){
$(checkCheckBoxen).addClass('is-valid')
} else{
$(checkCheckBoxen).removeClass('is-valid')
$(checkCheckBoxen).addClass('is-invalid')
}

I actually don't know if this solves your problem because I am not sure if I understand it.
HTML:
<fieldset>
<div class="col">
<legend class="col-form-label col-md-6">NewsFrek </legend>
<div class="col-md-5">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1">
<label class="form-check-label" for="gridRadios1">
Every Week
</label>
</div>
<div class="form-check col">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Every month
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3">
<label class="form-check-label" for="gridRadios3">
Every year
</label>
</div>
</div>
</div>
</fieldset>
<a href='javascript:;' class="btn btn-primary ml-5 mt-2" onClick='test()'>Submit Me</>
Javascript:
test = () => {
$(".form-check-input").each(function(index, element) {
var $this = $(this);
if (this.checked) {
$(element).removeClass('is-invalid')
$(element).addClass('is-valid');
}else{
$(element).addClass('is-invalid')
}
});
}
Here's a codepen link!

function display() {
if(document.getElementById('GFG').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("GFG").value
+ " radio button checked";
}
else if(document.getElementById('HTML').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("HTML").value
+ " radio button checked";
}
else if(document.getElementById('JS').checked) {
document.getElementById("disp").innerHTML
= document.getElementById("JS").value
+ " radio button checked";
}
else {
document.getElementById("disp").innerHTML
= "No one selected";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
How to check whether a radio button
is selected with JavaScript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on the button to check whether<br>
a radio button is sected or not
</h3>
<form>
<input type="radio" name="GFG" id="GFG"
value="GeeksforGeeks">GeeksforGeeks<br>
<input type="radio" name="GFG" id="HTML"
value="HTML">HTML<br>
<input type="radio" name="GFG" id="JS"
value="JavaScript">JavaScript<br><br>
<button type="button" onclick="display()">
Submit
</button>
</form>
<br>
<div id="disp" style=
"color:green; font-size:18px; font-weight:bold;">
</div>
</body>
</html>
form validation before submitting the form, you can modify as you need

Jquery Generically, show/Hide division within division in Yes/No Radio button

Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no"> No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
My jquery look this.
$('input[name="student"]:radio').change(function () {
var radio_value = ($('input:radio[name="student"]:checked').val());
if (radio_value == 'yes') {
$('.studentsType').slideDown("fast");
}
else if (radio_value == 'no') {
$('.studentsType').slideUp("fast");
}
});
$('input[name="gradstd"]:radio').change(function () {
var radio_value = ($('input:radio[name="gradstd"]:checked').val());
if (radio_value == 'yes') {
$('.departName').slideDown("fast");
}
else if (radio_value == 'no') {
$('.departName').slideUp("fast");
}
});
$('input[name="living"]:radio').change(function () {
var radio_value = ($('input:radio[name="living"]:checked').val());
if (radio_value == 'yes') {
$('.earning').slideDown("fast");
}
else if (radio_value == 'no') {
$('.earning').slideUp("fast");
}
});
Links for Fiddle:
http://jsfiddle.net/mgrgfqfd/
Please help !!

You can use a data attribute in the radio buttons to indicate which DIV should be toggled.
$(':radio[data-rel]').change(function() {
var rel = $("." + $(this).data('rel'));
if ($(this).val() == 'yes') {
rel.slideDown();
} else {
rel.slideUp();
rel.find(":text,select").val("");
rel.find(":radio,:checkbox").prop("checked", false);
}
});
.studentsType,
.departName,
.earning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes" data-rel="earning">Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no" data-rel="earning">No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>

If you keep this sort of structure it can be achieved with a tiny bit of code:
http://jsfiddle.net/mgrgfqfd/2/
HTML:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group" data-target="gruduate">
<label class="radio-inline">
<input type="radio" name="student" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
JS:
$('input:radio').on('change', function() {
$(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});
Just ensure that your yes/no buttons are within a control-group and you put the optional elements directly after it inside a div with a class of .optional

Below code will find next div and perform sliding in jquery this helps you to avoid multiple redundant lines of code and ifs.
$('input:radio').on('change', function () {//Register change event for all radio button
if ($(this).val() == 'yes') {//check value of selected radio is yes
$(this).parent().parent().next('div').slideDown("fast");
}
else if ($(this).val() == 'no') {//check value of selected radio is no
$(this).parent().parent().next('div').slideUp("fast");
}
});

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>

Multiple fields single model update in knockoutjs

I have a form with multiple fields in knockoutjs. I am creating model data with json.
I have created a HTML Form with multiple fileds for searching in this data via knockouts.
The problem i am getting is the searching/filtration going on "OR" condition basis. When select other filter previous one gone and searching goes on current fields only.How can i overcome with this problem.
Knockout JS
var outfitterJSON = <?php echo $this->JSON; ?>
var ViewModel = function(outfittersJSON) {
var self = this;
// Inputs
self.nameSearch = ko.observable();
self.registrationNumber = ko.observable();
self.unitNumber = ko.observable();
// Checkboxes & Radios
self.activeFilters = ko.observableArray([]);
self.regionFilters = ko.observableArray([]);
// Items
self.outfitters = ko.observableArray([]);
self.outfitters_temp = ko.observableArray([]);
//populate outfitters object and add visible flag for knockout to show/hide
outfittersJSON.forEach(function(value) {
value.visible = ko.observable(true);
self.outfitters().push(value);
});
// Search by Checkbox filters
self.activeFilters.subscribe(function(filters) {
// console.log(filters);
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (filters.length) {
var shouldShowOutfitter = true;
//hide based on fitler array
filters.forEach(function(filter){
if (outfitter[filter] !== 'yes')
shouldShowOutfitter = false;
});
outfitter.visible(shouldShowOutfitter);
} else {
//show all if none are selected
outfitter.visible(true);
}
});
});
// Search by Business Name
self.nameSearch.subscribe(function(query) {
//console.log(query);
//console.log(self.outfitters())
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['businessname'].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Registration Number
self.registrationNumber.subscribe(function(regNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['reg'].indexOf(regNum) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Hunt Units
self.unitNumber.subscribe(function(unitNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (outfitter['unit'].indexOf(unitNum.toString()) >= 0) {
outfitter.visible(true);
} else {
//show all if none are selected
outfitter.visible(false);
}
});
});
// Search by Region Numbers
self.regionFilters.subscribe(function(region) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['region'] === region) {
outfitter.visible(true);
} else if (region === 'any') {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
};
var vm = new ViewModel(outfitterJSON);
ko.applyBindings(vm);
var $ = jQuery.noConflict();
// Reset all filters visually and fire click/change events
// so KO.js knows that items have been changed and can update accordingly
$('#outfitter-filter').on('reset', function (e) {
e.preventDefault();
$(this).find('input, select, textarea').each(function () {
if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
$(this).val($(this)[0].defaultChecked);
$(this).trigger('click');
$(this).trigger('change');
}
} else {
if ($(this).val() !== $(this)[0].defaultValue) {
$(this).val($(this)[0].defaultValue);
$(this).change();
}
}
});
});
HTML Form
<form action="" id="outfitter-filter" class="search_form">
<p><input type="reset" class="reset btn btn-sm btn-primary">
<strong>Filters:</strong> <span data-bind="text: nameSearch"></span> <span data-bind="text: activeFilters"></span>
</p>
<div class="row">
<div class="col-md-2">
<!-- Name Search -->
<label for="">Business Name</label>
<input type="search" data-bind="value: nameSearch, valueUpdate: 'keyup'" autocomplete="off" placeholder="Search by Name"/>
</div>
<div class="col-md-2">
<!-- Registration Number -->
<label for="">Registration #</label>
<input type="search" data-bind="value: registrationNumber, valueUpdate: 'keyup'" autocomplete="off" placeholder="Registration Number"/>
</div>
<div class="col-md-2">
<!-- Unit # -->
<label for="">Hunt Unit #</label>
<input type="search" data-bind="value: unitNumber, valueUpdate: 'keyup'" id="hunt-unit" maxlength="3" autocomplete="off" placeholder="Hunt Unit #"/>
</div>
<div class="col-md-4">
<!-- Regions -->
<label for="">Regions</label> <br>
<label class="radio-inline">
<input type="radio" name="NW" value="NW" data-bind="checked: regionFilters"> NW
</label>
<label class="radio-inline">
<input type="radio" name="SW" value="SW" data-bind="checked: regionFilters"> SW
</label>
<label class="radio-inline">
<input type="radio" name="NE" value="NE" data-bind="checked: regionFilters"> NE
</label>
<label class="radio-inline">
<input type="radio" name="SE" value="SE" data-bind="checked: regionFilters"> SE
</label>
<label class="radio-inline">
<input type="radio" name="any" value="any" data-bind="checked: regionFilters"> Any Region
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Big Game Interests -->
<fieldset id="big-game">
<div class="row">
<div class="col-md-12">
<strong>Big Game of Interest:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="muledeer" type="checkbox" name="muledeer" data-bind="checked: activeFilters">Mule Deer</label></div>
<div class="checkbox"><label><input value="whitetaildeer" type="checkbox" name="whitetaildeer" data-bind="checked: activeFilters">Whitetail Deer</label></div>
<div class="checkbox"><label><input value="antelope" type="checkbox" name="antelope" data-bind="checked: activeFilters">Antelope</label></div>
<div class="checkbox"><label><input value="elk" type="checkbox" name="elk" data-bind="checked: activeFilters">Elk</label></div>
<div class="checkbox"><label><input value="mountainlion" type="checkbox" name="mountainlion" data-bind="checked: activeFilters">Mountain Lion</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="mountaingoat" type="checkbox" name="mountaingoat" data-bind="checked: activeFilters">Mountain Goat</label></div>
<div class="checkbox"><label><input value="bear" type="checkbox" name="bear" data-bind="checked: activeFilters">Bear</label></div>
<div class="checkbox"><label><input value="bighornsheep" type="checkbox" name="bighornsheep" data-bind="checked: activeFilters">Bighorn Sheep</label></div>
<div class="checkbox"><label><input value="moose" type="checkbox" name="moose" data-bind="checked: activeFilters">Moose</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Small Game -->
<fieldset id="small-game">
<p><strong>Small Game of Interest:</strong></p>
<div class="checkbox"><label><input value="smallgame" type="checkbox" name="smallgame" data-bind="checked: activeFilters">General Small Game</label></div>
<div class="checkbox"><label><input value="turkey" type="checkbox" name="turkey" data-bind="checked: activeFilters">Turkey</label></div>
<div class="checkbox"><label><input value="uplandbirds" type="checkbox" name="uplandbirds" data-bind="checked: activeFilters">Upland Birds</label></div>
<div class="checkbox"><label><input value="waterfowl" type="checkbox" name="waterfowl" data-bind="checked: activeFilters">Waterfowl</label></div>
<div class="checkbox"><label><input value="varmints" type="checkbox" name="varmints" data-bind="checked: activeFilters">Varmints</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Lodging -->
<fieldset id="lodging">
<div class="row">
<div class="col-md-12">
<strong>Lodging:</strong>
</div>
<div class="col-md-4">
<div class="checkbox"><label><input value="lodge" type="checkbox" name="lodge" data-bind="checked: activeFilters">Lodge</label></div>
<div class="checkbox"><label><input value="cabins" type="checkbox" name="cabins" data-bind="checked: activeFilters">Cabins</label></div>
<div class="checkbox"><label><input value="trailers" type="checkbox" name="trailers" data-bind="checked: activeFilters">Trailers</label></div>
<div class="checkbox"><label><input value="tents" type="checkbox" name="tents" data-bind="checked: activeFilters">Tents</label></div>
<div class="checkbox"><label><input value="motel" type="checkbox" name="motel" data-bind="checked: activeFilters">Motel</label></div>
</div>
<div class="col-md-8">
<div class="checkbox"><label><input value="wildernesscamps" type="checkbox" name="wildernesscamps" data-bind="checked: activeFilters">Wilderness Camps</label></div>
<div class="checkbox"><label><input value="handicapaccessible" type="checkbox" name="handicapaccessible" data-bind="checked: activeFilters">Handicap Accessible</label></div>
<div class="checkbox"><label><input value="camping" type="checkbox" name="camping" data-bind="checked: activeFilters">Camping</label></div>
<div class="checkbox"><label><input value="dropcamps" type="checkbox" name="dropcamps" data-bind="checked: activeFilters">Drop Camps</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Summer Recreation -->
<fieldset id="summer">
<div class="row">
<div class="col-md-12">
<strong>Summer Recreation:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="flyfishing" type="checkbox" name="flyfishing" data-bind="checked: activeFilters">Fly Fishing</label></div>
<div class="checkbox"><label><input value="spincasting" type="checkbox" name="spincasting" data-bind="checked: activeFilters">Spin Casting</label></div>
<div class="checkbox"><label><input value="lakefishing" type="checkbox" name="lakefishing" data-bind="checked: activeFilters">Lake Fishing</label></div>
<div class="checkbox"><label><input value="streamfishing" type="checkbox" name="streamfishing" data-bind="checked: activeFilters">Stream Fishing</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="floattrips" type="checkbox" name="floattrips" data-bind="checked: activeFilters">Float Trips</label></div>
<div class="checkbox"><label><input value="rafting" type="checkbox" name="rafting" data-bind="checked: activeFilters">Rafting</label></div>
<div class="checkbox"><label><input value="other" type="checkbox" name="other" data-bind="checked: activeFilters">Other</label></div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Special Services -->
<fieldset id="services">
<div class="row">
<div class="col-md-12">
<strong>Special Services:</strong>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="packtrips" type="checkbox" name="packtrips" data-bind="checked: activeFilters">Pack Trips</label></div>
<div class="checkbox"><label><input value="horserides" type="checkbox" name="horserides" data-bind="checked: activeFilters">Horse Rides</label></div>
<div class="checkbox"><label><input value="cattledrives" type="checkbox" name="cattledrives" data-bind="checked: activeFilters">Cattle Drives</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input value="horserental" type="checkbox" name="horserental" data-bind="checked: activeFilters">Horse Rental</label></div>
<div class="checkbox"><label><input value="guideschools" type="checkbox" name="guideschools" data-bind="checked: activeFilters">Guide Schools</label></div>
<div class="checkbox"><label><input value="overnighttrips" type="checkbox" name="overnighttrips" data-bind="checked: activeFilters">Overnight Trips</label></div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Winter -->
<fieldset id="winter">
<p><strong>Winter:</strong></p>
<div class="checkbox"><label><input value="sleighrides" type="checkbox" name="sleighrides" data-bind="checked: activeFilters">Sleigh Rides</label></div>
<div class="checkbox"><label><input value="snowmobiletours" type="checkbox" name="snowmobiletours" data-bind="checked: activeFilters">SnowMobile Tours/Rental</label></div>
<div class="checkbox"><label><input value="skiing" type="checkbox" name="skiing" data-bind="checked: activeFilters">Skiing</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Operating Area -->
<fieldset id="operating-area">
<p><strong>Operating Area</strong></p>
<div class="checkbox"><label><input value="blm" type="checkbox" name="blm" data-bind="checked: activeFilters">BLM</label></div>
<div class="checkbox"><label><input value="nationalforest" type="checkbox" name="nationalforest" data-bind="checked: activeFilters">National Forest</label></div>
<div class="checkbox"><label><input value="privateland" type="checkbox" name="privateland" data-bind="checked: activeFilters">Private Land</label></div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Other -->
<fieldset id="other">
<p><strong>Other</strong></p>
<div class="checkbox"><label><input value="ranchingforwildlife" type="checkbox" name="ranchingforwildlife" data-bind="checked: activeFilters">Ranching for Wildlife</label></div>
<div class="checkbox"><label><input value="workingcattleranch" type="checkbox" name="workingcattleranch" data-bind="checked: activeFilters">Working Cattle Ranch</label></div>
</fieldset>
</div>
</div>

I've copied your code to the snippet below, and it runs as I expect (output on the console indicates whether items would be shown).
var ViewModel = function(outfittersJSON) {
var self = this;
// Inputs
self.nameSearch = ko.observable();
self.registrationNumber = ko.observable();
self.unitNumber = ko.observable();
// Checkboxes & Radios
self.activeFilters = ko.observableArray([]);
self.regionFilters = ko.observableArray([]);
// Items
self.outfitters = ko.observableArray([]);
self.outfitters_temp = ko.observableArray([]);
//populate outfitters object and add visible flag for knockout to show/hide
outfittersJSON.forEach(function(value) {
value.visible = ko.observable(true);
self.outfitters().push(value);
});
// Search by Checkbox filters
self.activeFilters.subscribe(function(filters) {
console.debug(filters);
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (filters.length) {
var shouldShowOutfitter = true;
//hide based on fitler array
console.debug("Checking", outfitter, "for", filters);
filters.forEach(function(filter){
if (outfitter[filter] !== 'yes')
shouldShowOutfitter = false;
});
outfitter.visible(shouldShowOutfitter);
console.debug("Show?", shouldShowOutfitter);
} else {
//show all if none are selected
outfitter.visible(true);
}
});
});
// Search by Business Name
self.nameSearch.subscribe(function(query) {
//console.log(query);
//console.log(self.outfitters())
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['businessname'].toLowerCase().indexOf(query.toLowerCase()) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Registration Number
self.registrationNumber.subscribe(function(regNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['reg'].indexOf(regNum) >= 0) {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
// Search by Hunt Units
self.unitNumber.subscribe(function(unitNum) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if (outfitter['unit'].indexOf(unitNum.toString()) >= 0) {
outfitter.visible(true);
} else {
//show all if none are selected
outfitter.visible(false);
}
});
});
// Search by Region Numbers
self.regionFilters.subscribe(function(region) {
ko.utils.arrayForEach(self.outfitters(), function(outfitter) {
if(outfitter['region'] === region) {
outfitter.visible(true);
} else if (region === 'any') {
outfitter.visible(true);
} else {
outfitter.visible(false);
}
});
});
};
var vm = new ViewModel([{'muledeer':'yes'},{'muledeer':'yes', 'whitetaildeer':'yes'}]);
ko.applyBindings(vm);
var $ = jQuery.noConflict();
// Reset all filters visually and fire click/change events
// so KO.js knows that items have been changed and can update accordingly
$('#outfitter-filter').on('reset', function (e) {
e.preventDefault();
$(this).find('input, select, textarea').each(function () {
if ($(this).is('input[type="radio"], input[type="checkbox"]')) {
if ($(this).is(':checked') !== $(this)[0].defaultChecked) {
$(this).val($(this)[0].defaultChecked);
$(this).trigger('click');
$(this).trigger('change');
}
} else {
if ($(this).val() !== $(this)[0].defaultValue) {
$(this).val($(this)[0].defaultValue);
$(this).change();
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="outfitter-filter" class="search_form">
<p>
<input type="reset" class="reset btn btn-sm btn-primary">
<strong>Filters:</strong> <span data-bind="text: nameSearch"></span> <span data-bind="text: activeFilters"></span>
</p>
<div class="row">
<div class="col-md-2">
<!-- Name Search -->
<label for="">Business Name</label>
<input type="search" data-bind="value: nameSearch, valueUpdate: 'keyup'" autocomplete="off" placeholder="Search by Name" />
</div>
<div class="col-md-2">
<!-- Registration Number -->
<label for="">Registration #</label>
<input type="search" data-bind="value: registrationNumber, valueUpdate: 'keyup'" autocomplete="off" placeholder="Registration Number" />
</div>
<div class="col-md-2">
<!-- Unit # -->
<label for="">Hunt Unit #</label>
<input type="search" data-bind="value: unitNumber, valueUpdate: 'keyup'" id="hunt-unit" maxlength="3" autocomplete="off" placeholder="Hunt Unit #" />
</div>
<div class="col-md-4">
<!-- Regions -->
<label for="">Regions</label>
<br>
<label class="radio-inline">
<input type="radio" name="NW" value="NW" data-bind="checked: regionFilters">NW
</label>
<label class="radio-inline">
<input type="radio" name="SW" value="SW" data-bind="checked: regionFilters">SW
</label>
<label class="radio-inline">
<input type="radio" name="NE" value="NE" data-bind="checked: regionFilters">NE
</label>
<label class="radio-inline">
<input type="radio" name="SE" value="SE" data-bind="checked: regionFilters">SE
</label>
<label class="radio-inline">
<input type="radio" name="any" value="any" data-bind="checked: regionFilters">Any Region
</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Big Game Interests -->
<fieldset id="big-game">
<div class="row">
<div class="col-md-12">
<strong>Big Game of Interest:</strong>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="muledeer" type="checkbox" name="muledeer" data-bind="checked: activeFilters">Mule Deer</label>
</div>
<div class="checkbox">
<label>
<input value="whitetaildeer" type="checkbox" name="whitetaildeer" data-bind="checked: activeFilters">Whitetail Deer</label>
</div>
<div class="checkbox">
<label>
<input value="antelope" type="checkbox" name="antelope" data-bind="checked: activeFilters">Antelope</label>
</div>
<div class="checkbox">
<label>
<input value="elk" type="checkbox" name="elk" data-bind="checked: activeFilters">Elk</label>
</div>
<div class="checkbox">
<label>
<input value="mountainlion" type="checkbox" name="mountainlion" data-bind="checked: activeFilters">Mountain Lion</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="mountaingoat" type="checkbox" name="mountaingoat" data-bind="checked: activeFilters">Mountain Goat</label>
</div>
<div class="checkbox">
<label>
<input value="bear" type="checkbox" name="bear" data-bind="checked: activeFilters">Bear</label>
</div>
<div class="checkbox">
<label>
<input value="bighornsheep" type="checkbox" name="bighornsheep" data-bind="checked: activeFilters">Bighorn Sheep</label>
</div>
<div class="checkbox">
<label>
<input value="moose" type="checkbox" name="moose" data-bind="checked: activeFilters">Moose</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Small Game -->
<fieldset id="small-game">
<p><strong>Small Game of Interest:</strong>
</p>
<div class="checkbox">
<label>
<input value="smallgame" type="checkbox" name="smallgame" data-bind="checked: activeFilters">General Small Game</label>
</div>
<div class="checkbox">
<label>
<input value="turkey" type="checkbox" name="turkey" data-bind="checked: activeFilters">Turkey</label>
</div>
<div class="checkbox">
<label>
<input value="uplandbirds" type="checkbox" name="uplandbirds" data-bind="checked: activeFilters">Upland Birds</label>
</div>
<div class="checkbox">
<label>
<input value="waterfowl" type="checkbox" name="waterfowl" data-bind="checked: activeFilters">Waterfowl</label>
</div>
<div class="checkbox">
<label>
<input value="varmints" type="checkbox" name="varmints" data-bind="checked: activeFilters">Varmints</label>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Lodging -->
<fieldset id="lodging">
<div class="row">
<div class="col-md-12">
<strong>Lodging:</strong>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input value="lodge" type="checkbox" name="lodge" data-bind="checked: activeFilters">Lodge</label>
</div>
<div class="checkbox">
<label>
<input value="cabins" type="checkbox" name="cabins" data-bind="checked: activeFilters">Cabins</label>
</div>
<div class="checkbox">
<label>
<input value="trailers" type="checkbox" name="trailers" data-bind="checked: activeFilters">Trailers</label>
</div>
<div class="checkbox">
<label>
<input value="tents" type="checkbox" name="tents" data-bind="checked: activeFilters">Tents</label>
</div>
<div class="checkbox">
<label>
<input value="motel" type="checkbox" name="motel" data-bind="checked: activeFilters">Motel</label>
</div>
</div>
<div class="col-md-8">
<div class="checkbox">
<label>
<input value="wildernesscamps" type="checkbox" name="wildernesscamps" data-bind="checked: activeFilters">Wilderness Camps</label>
</div>
<div class="checkbox">
<label>
<input value="handicapaccessible" type="checkbox" name="handicapaccessible" data-bind="checked: activeFilters">Handicap Accessible</label>
</div>
<div class="checkbox">
<label>
<input value="camping" type="checkbox" name="camping" data-bind="checked: activeFilters">Camping</label>
</div>
<div class="checkbox">
<label>
<input value="dropcamps" type="checkbox" name="dropcamps" data-bind="checked: activeFilters">Drop Camps</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Summer Recreation -->
<fieldset id="summer">
<div class="row">
<div class="col-md-12">
<strong>Summer Recreation:</strong>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="flyfishing" type="checkbox" name="flyfishing" data-bind="checked: activeFilters">Fly Fishing</label>
</div>
<div class="checkbox">
<label>
<input value="spincasting" type="checkbox" name="spincasting" data-bind="checked: activeFilters">Spin Casting</label>
</div>
<div class="checkbox">
<label>
<input value="lakefishing" type="checkbox" name="lakefishing" data-bind="checked: activeFilters">Lake Fishing</label>
</div>
<div class="checkbox">
<label>
<input value="streamfishing" type="checkbox" name="streamfishing" data-bind="checked: activeFilters">Stream Fishing</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="floattrips" type="checkbox" name="floattrips" data-bind="checked: activeFilters">Float Trips</label>
</div>
<div class="checkbox">
<label>
<input value="rafting" type="checkbox" name="rafting" data-bind="checked: activeFilters">Rafting</label>
</div>
<div class="checkbox">
<label>
<input value="other" type="checkbox" name="other" data-bind="checked: activeFilters">Other</label>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- Special Services -->
<fieldset id="services">
<div class="row">
<div class="col-md-12">
<strong>Special Services:</strong>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="packtrips" type="checkbox" name="packtrips" data-bind="checked: activeFilters">Pack Trips</label>
</div>
<div class="checkbox">
<label>
<input value="horserides" type="checkbox" name="horserides" data-bind="checked: activeFilters">Horse Rides</label>
</div>
<div class="checkbox">
<label>
<input value="cattledrives" type="checkbox" name="cattledrives" data-bind="checked: activeFilters">Cattle Drives</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input value="horserental" type="checkbox" name="horserental" data-bind="checked: activeFilters">Horse Rental</label>
</div>
<div class="checkbox">
<label>
<input value="guideschools" type="checkbox" name="guideschools" data-bind="checked: activeFilters">Guide Schools</label>
</div>
<div class="checkbox">
<label>
<input value="overnighttrips" type="checkbox" name="overnighttrips" data-bind="checked: activeFilters">Overnight Trips</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Winter -->
<fieldset id="winter">
<p><strong>Winter:</strong>
</p>
<div class="checkbox">
<label>
<input value="sleighrides" type="checkbox" name="sleighrides" data-bind="checked: activeFilters">Sleigh Rides</label>
</div>
<div class="checkbox">
<label>
<input value="snowmobiletours" type="checkbox" name="snowmobiletours" data-bind="checked: activeFilters">SnowMobile Tours/Rental</label>
</div>
<div class="checkbox">
<label>
<input value="skiing" type="checkbox" name="skiing" data-bind="checked: activeFilters">Skiing</label>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Operating Area -->
<fieldset id="operating-area">
<p><strong>Operating Area</strong>
</p>
<div class="checkbox">
<label>
<input value="blm" type="checkbox" name="blm" data-bind="checked: activeFilters">BLM</label>
</div>
<div class="checkbox">
<label>
<input value="nationalforest" type="checkbox" name="nationalforest" data-bind="checked: activeFilters">National Forest</label>
</div>
<div class="checkbox">
<label>
<input value="privateland" type="checkbox" name="privateland" data-bind="checked: activeFilters">Private Land</label>
</div>
</fieldset>
</div>
<div class="col-md-3">
<!-- Other -->
<fieldset id="other">
<p><strong>Other</strong>
</p>
<div class="checkbox">
<label>
<input value="ranchingforwildlife" type="checkbox" name="ranchingforwildlife" data-bind="checked: activeFilters">Ranching for Wildlife</label>
</div>
<div class="checkbox">
<label>
<input value="workingcattleranch" type="checkbox" name="workingcattleranch" data-bind="checked: activeFilters">Working Cattle Ranch</label>
</div>
</fieldset>
</div>
</div>
</form>

Develop Reference

JavaScript is the programming language of the Web.

Checkbox checked works only once - javascript

Related

Hiding / showing a checkboxes based on a previously selected checkbox (based on the data-attribute) jquery

trying to validate my radiobuttons. Can someone help me on my way?

Jquery Generically, show/Hide division within division in Yes/No Radio button

how to enable textbox ,when uncheck a checkbox using javascript

Multiple fields single model update in knockoutjs

Categories

Resources