Develop Reference

show/hide on radio button checked/unchecked- knockout js

I have 2 radio buttons, When I click on the option A, a particular div has to be shown, and when click on the option B, 1st div should be hidden and 2nd div should be shown. Below is the code.
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="click: test">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div style="display: none" data-bind="visible: showDiv">
test Div
</div>
Following is the script I tried:(coffee script)
#showPhone = ko.observable false
test: =>
#showPhone true
using this if I click on the 1st radio button, I was able to see the div, but I don't know if its the right way Can someone please guide me through this?
Thanks.

You'll be needing the two following bindings:
checked: to put on your radio-buttons
visible: to put on your divs you want to display
your html will look like this:
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-A" value="true" data-bind="checked: optionA">
<label for="test-radio-Option-A">Text Message</label>
</div>
<div class="form-group">
<input type="radio" name="test-radio" id="test-radio-Option-B" value="false" data-bind="checked: optionB">
<label for="test-radio-Option-B">Text Message</label>
</div>
<div data-bind="visible: optionA">
test Div A
</div>
<div data-bind="visible: optionB">
test Div B
</div>
Your viewModel will need 2 boolean observables optionA and optionB for the view to bind to in this manner

JQuery .append() content won't stay on screen

I'm creating a form where the user can add their modules that they study at university. When they click the button, it adds a new set of fields for another module. I've added a click listener to the button #add and I'm trying to append the form #input_form with the same fields:
<form id="input_form">
<h6>Add modules below...</h6>
<div class="form-row">
<div class="col-md-6">
<input type="text" class="form-control" name="module_name" placeholder="Module Name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="module_code" placeholder="Module Code">
</div>
</div>
<div class="form-group col-md-6">
<label for="credit_entry"># of Credits: </label>
<input type="number" name="credits" id="credit_entry">
</div>
<div class="form-group col-md-6">
<label for="colour_selector">(Optional) Choose a Colour: </label>
<select id="colour_selector" name="colour_select">
<option value="blue">Blue</option> <!-- Default -->
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</div>
</div>
<div class="row">
<button name="add" id="add" class="btn btn-secondary">Add Another</button>
</div>
// Add fields dynamically
$("#add").click(function() {
$("#input_form").append("<h1>The fields will go here</h1>");
});
When I click the button, I see the content (the h1) added for a split second but then it disappears. I am not sure why the appended HTML won't stay on screen. I have another part of this project which works similarly and appends to a ul list and the HTML is persisting on screen for that just fine, but for some reason this won't.
I'm pretty new to web design and jQuery so sorry if there's an easy answer that I'm missing.

"If the element has a form owner, the element must submit the form owner from the button element." (w3.org)
That means, any button inside a form executes submit() on its parent form.
To prevent that, explicitly define the button type as button:
<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>
In action:
https://codepen.io/akamichael/pen/NWqgaWz?editors=1010

jQuery: Toggle field attribute: un-checked Checkbox means disabled

I would like to be able to edit a multi-select field when ("Update Data?") Checkbox is checked, and disabled the field again, when checkbox is un-checked.
Important is that checked status always leads to being able to edit, meanwhile un-checked means field is disabled, regardless if I load the form with a checked box or as un-checked as the initial state (I can save either or)
I find several useful answers but struggling with syntax to combine those into my solution.
Below can toggle once, then it gets stuck:
$(function() {
$("#checkbox1").change(function() {
if ($("#field2").attr('disabled', !this.checked)) {
$("#field2").removeAttr("disabled");
} else {
$("#field2").attr("disabled", "disabled");
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="div_id_product" class="form-group row"> <label for="field2" class="col-form-label col-sm-4">
Multiselect
</label>
<div class="col-sm-7">
<select name="multiselect" class="select2-show-search selectmultiple form-control" id="field2" disabled="disabled" multiple style="width: 100%;">
<option value="1" selected>Product 1 </option>
<option value="3" selected>Product 3</option>
<option value="2">Product 2</option>
</select>
</div>
</div>
<div class="form-group row" id="checkbox1"> <label for="id_to_update" class="col-form-label col-sm-4">
Update Data?
</label>
<div class="col-sm-7">
<div class="input-group"> <input type="checkbox" name="to_update" class="checkboxinput" id="id_to_update"> <span class="input-group-append"></span> </div>
</div>
</div>
</form>

Just change your JS to this. You have the change listener on the wrong id.
The listener should be on #id_to_update (input) instead of #checkbox1 which is the div.
$(function() {
$("#id_to_update").change(function() {
$("#field2").prop('disabled', !this.checked);
});
})

Here is the solution you are looking for
$(function() {
$('#field-editable').change(function() {
$('#firstname').prop('disabled', !this.checked);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<label for="field-editable">
<input type="checkbox" id="field-editable">
do you want to edit
</label>
<input type="text" name="firstname" id="firstname" disabled="disabled">
</form>

Which dropdown item and checkbox are selected if button clicked?

I have a dropdown list like this:
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
when a client select each one, some related check-boxes will appear. each item has got its own check-boxes. for example when they select mp3, check-boxes appear like this
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Storage</label>
</div>
</div>
And have a button at the end
<button class="ui blue basic button" id="search">Search</button>
what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked?

Need to say, that SO is not a free code-writing service, so you have to provide what did you try, but for the first time it's OK, just notice that.
Here is what you're trying to achieve:
function whichIsSelected() {
var checkedArr = [];
var dtopdownVal = $("#product").val();
$("input[type='checkbox']").each(function() {
if($(this).prop("checked")) {
checkedArr.push($(this).prop("name"));
}
});
alert(`Selected item from dropdown: ${dtopdownVal}. Checked checkboxes: ${checkedArr}`)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product" class="ui fluid search dropdown" >
<option value="mp3">MP3 player</option>
<option value="camera">Camera</option>
<option value="mobile">Mobile</option>
<option value="dvd">DVD player</option>
</select>
<div class="ui segment" id="mp3">
<div class="ui toggle checkbox">
<input type="checkbox" name="Price">
<label>Price</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Weight">
<label>Weight</label>
</div>
<div class="ui toggle checkbox">
<input type="checkbox" name="Storage">
<label>Storage</label>
</div>
</div>
<button class="ui blue basic button" id="search" onclick="whichIsSelected()">Search</button>
<!-- what is the jquery code to check if the button is clicked, show an alert contains the name of the item in dropdown and check-boxes which are checked? -->
At first, I'm just getting the dropdown value via $("#product").val();. Then, I select all checkboxes via $("input[type='checkbox']"), then, I iterate through selected checkboxes via .each() and pushing name property of only checked checkboxes to checkedArr array. And finally I'm showing the info with simple alert.

You can see this solution https://jsfiddle.net/dpdvmh8x/1/
Read more:
https://api.jquery.com/click/
https://stackoverflow.com/a/1965137/6063698

forcing checkbox selected

I'm trying to find see if we can make a checkbox selected if we chose an option from the dropdown menu. Here's a mock-up code of what I'm trying to modify.
$('.stackoverflow').on('change', function() {
$(this).parent().next().find('input:checkbox').attr("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>
I'm trying to have the checkbox "checkbox" be selected if I do select an option from the dropdown menu. Is there an easy way to do this? When searching stackoverflow, the closest thing that I found was to have the next one be selected and not the current one. Thank you very much for any help at all.

Just reference the correct checkbox correctly?
In your case, you have this:
$(this).parent().next().find('input:checkbox').attr("checked", true);
this refers to the select
parent refers to <div class="checkbox_wrapper">
next would then refer to <div class="checkbox_wrapper">
and finally find('input:checkbox') would find: <input
type="checkbox" id="not this one" />
Since the checkbox you want is a child of the same parent element that the select is in, the next() method call is what's causing the problem.
So, you could write:
$(this).parent().find('input:checkbox').attr("checked", true);
But, there are many ways to access an element. If it has an id, that is the simplest and most efficient way. So you are better off writing:
$('#checkbox').prop("checked", true);
Also, use .prop instead of .attr as .attr fails when you manually uncheck the checkbox and then select an item from the drop down.
$('.stackoverflow').on('change', function() {
$('#checkbox').prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkboxes">
<div class="checkbox_wrapper">
<input type="checkbox" id="How" /> How</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Do" /> do</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="I" /> I </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="Force" /> force </div>
<div class="checkbox_wrapper">
<input type="checkbox" id="The" /> the</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="checkbox" /> checkbox
<select class="stackoverflow">
<option value="to">to</option>
<option value="be">be</option>
<option value="selected">selected</option>
<option value="when">when</option>
<option value="we">we</option>
<option value="select">select</option>
<option value="an">an</option>
<option value="option">option</option>
</select>
</div>
<div class="checkbox_wrapper">
<input type="checkbox" id="not this one" /> not this checkbox but the previous one</div>

You have a couple of options to check the checkbox:
$(document).ready(function() {
$(".stackoverflow").on("change", function() {
//$("#checkbox").prop("checked", true);
$(this).prev("input[type='checkbox']").prop("checked", true);
})
})
Here is a fiddle of it working based on your example: https://jsfiddle.net/gz6mab4k/

Hurray, you are using the relative position of your dom elements to locate each other. I assume that's because you're going to get rid of all the IDs and add this structure many times to your page. So you have a small error in the javascript handler, as mentioned in a comment you break stuff by having .next(), which will force the handler to look for a checkbox in the div coming after the select's parent which is the one that contains checkbox id='not this one'. So you want:
$('.stackoverflow').on('change', function() {
$(this) // the select
.parent() // its parent DIV
.find('input:checkbox') // the only checkbox in the parent div
.attr("checked", true);
});