Develop Reference

Using JQuery to Unbind a Group of Checkboxes

I currently have the below jQuery script that binds a group of check boxes when the value test is selected from the dropdown list of the select html element. As a result, the check boxes act like radio buttons where one checkbox can be checked at one time. My issue is that I need the radio buttons to go back to their default behavior when selecting another value from the select box after the test value has been selected and I can't seem to figure it out. Any help would be greatly appreciated. Please see my below javascript and html code.
$('select').on('change', function() {
$('input.example').prop('checked', false);
if(this.value == 'test')
{
alert("Hello");
$('input.example').bind('change', function() {
$('input.example').not(this).attr('checked', false);
});
}
else if(this.value != 'test')
{
alert("Bye");
$('input.example').unbind('change', function() {
$('input.example').not(this).attr('checked', false);
});
}
});
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />

You can namespace your change handler so that you are referring to the same function when you unbind it. Instead of 'change' I used 'change.myChange' as the change event to distinguish it so that it can be easily unbound later. Otherwise you are actually creating an identical function then trying to unbind that instead of the one that you created and bound to the event. I hope this helps.
$('select').on('change', function() {
$('input.example').prop('checked', false);
if(this.value == 'test') {
$('input.example').bind('change.myChange', function() {
$('input.example').not(this).attr('checked', false);
});
} else if(this.value != 'test') {
$('input.example').unbind('change.myChange');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />

Try this
$(function () {
$('select').on('change', function () {
$('input.example').prop('checked', false);
if (this.value == 'test')
{
alert('Hello');
$('input.example').bind('change', changeHandler);
}
else if (this.value != 'test')
{
alert('Bye');
$('input.example').unbind('change', changeHandler);
}
});
function changeHandler() {
$('input.example').not(this).attr('checked', false);
}
});
Here is the working fiddle https://jsfiddle.net/wyd2206c/

Will you expect like this?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('select').on('change', function() {
if(this.value == 'test')
{
$('input.example').attr('type', 'radio');
$('input.example').attr('checked', false);
}else if(this.value != 'test')
{
$('input.example').attr('type', 'checkbox');
$('input.example').attr('checked', false);
}
});
});
</script>
<select id="myselect" name="action">
<option value="" selected="selected">-------------</option>
<option value="deleted_selected">Delete selected Clients</option>
<option value="test">Test</option>
</select>
<button type="submit" class="button" title="Run the selected action" name="index" value="0">Go</button>
<br><br>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />

jquery radio button each -not working

i am trying to loop through the radio buttons by name with 'each' function..the each function is not working and it is applying the logic only once and it is not looping for the next time..
My use case is, when user selects value from the select dropdown, needs to enable both the radio buttons and if the user deselects the dropdown- needs to disable back..
Here in my case, each function is looping only once and after that it is getting exit from it..Need help in figuring disable/enable based on dropdown selection..
html code:-
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser" value="anyUser" name="authPermission" id="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser" value="groupUser" name="authPermission" id="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder" id="authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
jquery:
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(){
$("#authPermission").prop('disabled',false);
$("#authPermission").prop('checked',false);
});
}
else{
$("#authPermission").each(function(){
$("#authPermission").prop('disabled',true);
$("#authPermission").prop('checked',false);
});
}
});

You cannot have more than one element with the same ID. So, I would change your code by removing the id attribute and putting a new value for the class attribute, then fetch the object using jquery class selector.
<div class="uriDiv input-group">
<select class="common authSelect form-control" name="authType" id="authType">
<option value="">
<spring:message code="newPolicy.selectAuthType"></spring:message>
</option>
<option value="DB">DB</option>
<option value="LDAP">LDAP</option>
</select>
</div>
<td>
<div class="auth-permission-rd">
<div class="uriDiv radio radio-left">
<label>
<input type="radio" class="common anyuser authPermission" value="anyUser" name="authPermission" disabled="disabled">Any User
</label>
</div>
<div class="uriDiv radio radio-input">
<label>
<input type="radio" class="common groupuser authPermission" value="groupUser" name="authPermission" disabled="disabled">
<input type="text" name="authPermissionValue" disabled="disabled" class="common form-control-placeHolder authPermissionValue" placeholder="Enter custom Permissions - Comma separated" />
</label>
</div>
</div>
And jQuery code :
$("#authType").change(function(){
if($(this).val()){
$("input:radio[name='authPermission']").each(function(elemId, elem){
$(elem).prop('disabled',false);
$(elem).prop('checked',false);
});
}
else{
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
}
});
But, if we take a better look at your code, I do not understand why you want to use "each". You can achieve the same thing without it :
// Following code :
$(".authPermission").each(function(elemId, elem){
$(elem).prop('disabled',true);
$(elem).prop('checked',false);
});
// Does the same thing as this one :
$(".authPermission").prop('disabled', true).prop('checked', false);

I refactored your code. Also enables the input field when the appropriate radio is clicked. This sould work:
function updateUI() {
var select = $("#authType");
var value = select.val();
var should_appear = (value.length == 0);
$("input:radio[name='authPermission']").attr('disabled',should_appear);
}
//binding...
$("input:radio").on("click", function() {
var should_display_textbox = !($(this).val() === "groupUser");
console.log(should_display_textbox);
$("input:text[name='authPermissionValue']").attr('disabled', should_display_textbox);
});
$("#authType").change(function(){
updateUI();
});
$(document).ready(function() {
updateUI(); //update also when page load
});

Something like this maybe?
$("#authType").change(function(){
var disabled = !$(this).val() ? true : false;
$("input:radio[name='authPermission']").each(function(){
$(this).prop('disabled', disabled );
$(this).prop('checked',false);
});
});

How to auto Set input values in a form when select an option?

I have a form for example:
<form>
<ul>
<li>
<select name="choose">
<option value="0">1</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person"id="field" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field" value="" />
</ul>
</form>
so, when I choose option:1 both the input fields must be filled with no. let say, No. of person = 3 and earning of person = $5.

Your question should be as well written as you can make it, including valid, semantic HTML.
Also, a question should contain the code you have tried, an explanation of what you have tried, where it's going wrong and exactly what you expect it to do, including some example input and output.
The following may help. Note that element IDs must be unique and that forms should use semantic markup (e.g. don't use a list to present it, don't put headings inside lists, use labels, group elements using fieldsets, etc.).
You can use the select element's change event to get the value and text of the selected option and display it elsewhere in the form. You can also reference form controls as named properties of the form, which is handy and more straight forward than using getElementById.
In the code, a reference to the select is passed to the function using this. Every form control has a form property that is a reference to the form that it's in. The rest should be easy enough to understand, but please ask if you need other help.
function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].text;
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option value="0">1</option>
<option value="100">2</option>
<option value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>

function getPerson(select) {
var form = select.form;
form.ref_person.value = select.options[select.selectedIndex].getAttribute('per');
form.ear_person.value = select.value;
}
<form>
<fieldset><legend>Person and earning</legend>
<label for="personSelect">Select a person
<select name="choose" id="personSelect" onchange="getPerson(this)">
<option per="3" value="0">1</option>
<option per="9" value="100">2</option>
<option per="27" value="500">3</option>
</select>
</label>
<br>
<label for="personNumber">No. Of person:
<input type="text" name="ref_person"id="personNumber"></label>
<label for="personEarning">Earning of person:
<input type="text" name="ear_person" id="personEarning"></label>
</fieldset>
</form>

Here is a code sample that uses the onchange event to copy values to the textboxes.
<script type="text/javascript">
function selectOnChange(obj) {
var val = obj.options[obj.selectedIndex].value;
var text = obj.options[obj.selectedIndex].text;
document.getElementById("field1").value = val;
document.getElementById("field2").value = text;
}
</script>
</head>
<body>
<div>
<select onchange='selectOnChange(this)' name="choose">
<option value="100">1</option>
<option value="200">2</option>
<option value="300">3</option>
</select>
</div>
<ul><li><h2>No. Of person</h2></li></ul>
<div>
<input type="text" name="ref_person" id="field1" value="">
<ul>
<li><h2>earning of person:</h2></li></ul>
<input type="text" name="ear_person" id="field2" value="" />
</div>

I couldn't get a switch statement to work, so I did it with three if statements, but here is my solution. Fiddle with it yourself to make it as you wish.
<form>
<ul>
<li>
<select name="choose" id="option1" onchange="relatedPrice()">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
</li>
<li><h2>No. Of person</h2></li>
<input type="text" name="ref_person" id="field1" value="" />
<li><h2>earning of person:</h2></li>
<input type="text" name="ear_person" id="field2" value="" />
</ul>
</form>
<script>
function relatedPrice() {
var e = document.getElementById("option1");
var test = e.options[e.selectedIndex].text;
document.getElementById("field1").value = test;
if(test==1) {
document.getElementById("field2").value = 100;
}
if(test==2) {
document.getElementById("field2").value = 200;
}
if(test==3) {
document.getElementById("field2").value = 300;
}
}
</script>

.prop('selected') not working, button is disabled all the time in jquery

I want to enable the the submit button once the status in the select field is selected.
<div class="close_req">
<div class="req_status">
<select id="status_update">
<option value="status" selected="selected" disabled="disabled">Status</option>
<option value="complete">Complete</option>
<option value="pending">Pending</option>
</select>
</div>
<div class="req_addcharges">
<select id="additional_charges">
<option value="charge">Additional Charges</option>
<option value="complete">Yes</option>
<option value="pending">No</option>
</select>
</div>
<div class="additional_charge">
<input type="text" id="add_price" name="add_price" placeholder="Enter the additional charge" />
</div>
<div class="task_desc">
<textarea id="task" name="task" cols="10" rows="6" placeholder="Description of the task"></textarea>
</div>
<div class="task_complete">
<input type="submit" id="complete" name="complete" value="Task Complete" />
</div>
</form>
</div>
Here is the jquery script i have tried
$(document).ready(function () {
$("#complete").attr("disabled", "disabled");
function updateFormEnabled() {
if ($("#status_update").prop('selected', true)) {
$("#complete").removeAttr('disabled');
} else {
$("#complete").attr('disabled', 'disabled');
}
}
});
$("#status_update").change(updateFormEnabled);
But the submit button is always disabled, I want the button to enabled once the status is selected in the select field. Can anyone please help me with this issue.

You have bad condition, it should be
if ($("#status_update").prop('selected') == true)

$("#status_update").change(updateFormEnabled); should be in $(document).ready(function () {});

The #status_update is select list and not an option, you must to check selected option instead:
function updateFormEnabled() {
$("#complete").attr('disabled', 'disabled');
$('#status_update option').each(function() {
if($(this).is(':selected')){
$("#complete").removeAttr('disabled');
return;
}
}
}
$("#status_update").change(updateFormEnabled);

Another way to do it is
if($("#status_update option:selected").length) {/* do action */}
JSFiddle
http://jsfiddle.net/9pqekb63/1/

How to get dropdown value and show in textbox using jquery?

What I want to do is get data from drop down and pass the data to textbox
here is my dropdown and textbox code
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: none;">
<option value=""></option>
<option value="1" data-id="10">a</option>
<option value="2" data-id="20">b</option>
<option value="3" data-id="30">c</option>
<option value="4" data-id="40">d</option>
<option value="5" data-id="50">e</option>
</select>
<div class=" control-group formSep template">
<label for="input01" class="control-label">Category Rate*:</label>
<div class="controls">
<input id="title" name="criteria_rate" size="30" type="text" class="criteria_rate span2" value="" readonly="readonly" />
</div>
</div>
here is how to get data-id from dropdown
var criteria_id = $(this).attr('data-id');
here is how to pass data to textbox
$('.criteria_rate').val(criteria_id);
here is my dropdown screenshot
Any idea how to solve my problem?

Here is what you need (I think)
FIDDLE
$('#chosen_a').change(function() {
$('#title').val($('#chosen_a option:selected').data('id'));
})

This is the most simple way
$(document).ready(function () {
$("#chosen_a").change(function () {
$('#title').val($("#chosen_a").val());
});
});

Try this:-
$('#chosen_a').change(function(){
//get the selected option's data-id value using jquery `.data()`
var criteria_rate = $(':selected',this).data('id');
//populate the rate.
$('.criteria_rate').val(criteria_rate);
});
Fiddle
Refer .data()

Here is a possible solution, uses jquery but get the data through the event data instead of using jquery.data (notice that it is a few characters shorter doing it this way :P )
$("#chosen_a").on("change", function (evt) {
$("#title").val(evt.target.selectedOptions[0].dataset.id);
});
Demonstrated on jsfiddle
(gave an alternative as I misread the question initially, so now I'm a little late with my correction)