My View code in MVC: I want to disable the Dropdownlist in View code when the checkbox is checked.
function SaveNewGroup() {
var group = RetrieveGroup();
var IsChecked = $(IsAssociation).is(":checked");
var url = (IsChecked) ? "/Administration/SaveNewGroupforIsAssociation" : "/Administration/SaveNewGroup";
var userID = $('#groupunderwriter').val();
$.ajax({
type: "POST",
url: url,
data: group,
datatype: "json",
success: function (groupID) {
if (groupID > 0) {
GetGroups();
$('#groupdialog').dialog('close');
}
else {
alert("Unable to create Group.");
}
}
});
}
Check box:
<tr>
<td>
<label>Is Association</label></td>
<td>
<input type ="checkbox" id="IsAssociation"/>
</td
>
and my dropdownlist:
<tr>
<td>Underwriter Name:</td>
<td>
<select id="groupunderwriter" style="width:150px;">
<option value ="0"></option>
#foreach (RMS.UserService.User u in Model.GroupUnderWriters)
{
<option value="#u.UserID">
#if(Model.MasterGroupAttribute.UserID == u.UserID)
{
#:selected="selected"
}
>#(u.FirstName + " " + u.LastName )</option>
}
</select>
</td>
</tr>
How to disable the dropdownlist when the checkbox is checked or enable it when not checked?
A short version would look like this:
$('#IsAssociation').change(function() {
$('#groupunderwriter').attr('disabled', $(this).is(':checked'));
});
Have a look at this fiddle. It works fine for me. i don't know why all the above are not working for you. I just used the jQuery ON event listener in case you have a race condition and these elements don't exist when you are creating a binding for them. Unlikely but hey, my example works. This isn't the ideal way to do it but it may give you some insight as to whatever is wrong with your code.
<input type ="checkbox" id="IsAssociation" /><span>your checkbox</span>
<br/>
<br/>
<select id="groupunderwriter" style="width:150px;">
<option value ="0">Hello</option>
<option value ="1">Goodbye</option>
</select>
$(document).on('change', '#IsAssociation', function(){
if($(this).prop('checked')){
$('#groupunderwriter').attr('disabled', 'disabled');
} else {
$('#groupunderwriter').removeAttr('disabled');
}
});
http://jsfiddle.net/T83vs/
I think prop is a better way to do it.
$("#groupunderwriter").prop("disabled", IsChecked);
Of course you can also use $("#checkbox").is(":checked") instead of IsChecked.
I cannot see any checkbox there, Anyway this is the simple jquery code to disable dropdown on checkbox checked.
$(function() {
$('#id_of_your_checkbox').change(function() {
if ($(this).is(':checked')) {
// disable the dropdown:
$('#id_of_dropdown').attr('disabled', 'disabled');
} else {
$('#id_of_dropdown').removeAttr('disabled');
}
});
});
Related
I'm using Bootstrap 3.0 for Ruby on Rails 4.2.5, and I need to make it so that in this form when the user selects the option "No" from the drop down menu, the next text field is shown to them, otherwise, the text field remains hidden. I've found a similar question with this solution, but I couldn't implement it with the Bootstrap form, this is my attempt at it :
Dropdown Input:
<%= f.select :answer, [["Yes", 1], ["No", 0]], label: "Do you wish to bla bla? ", class: "selectpicker", Id: "selectpicker" %>
Toggled Input (should show when "No" is picked) :
<%= f.text_area :explain , label: "Please explain why not", Id: "sdd"%>
Javascript: `
("selectpicker").change(function changetextbox());
function changetextbox()
{
if (document.getElementById("selectpicker").value === 0 ) {
document.getElementById("sdd").disable='true';
} else {
document.getElementById("sdd").disable='false';
}
}
`
I tried changing value === 0 to value == 0 and the 0 to No, but it still doesn't work.
They're in my code in this order, but I'm not sure how this should work with the bootstrap form tags. Thanks in advance.
Reference : This is the question from which i got this code
Enable/disable of textbox on option selected from drop down menu
$(document).on('change', '#selectpicker', changetextbox);
function changetextbox() {
if (document.getElementById("selectpicker").value === '0') {
document.getElementById("sdd").disabled = true;
} else {
document.getElementById("sdd").disabled = false;
}
}
You forgot $ and there is no selectpicker selector, you have to use class or ID like .selectpicker or #selectpicker when you use jQuery (depends on your HTML).
There is no disable, you have to use disabled and you can't use quotation marks for true and false.
You can't use .change(function changetextbox()), just use $(document).on('change', '#selectpicker', changetextbox).
0 must be in quotation marks.
I assume your textarea is only disabled (not hidden by CSS).
CODEPEN EXAMPLE
Try :
<select id="selectbox" name="mfi_4_a_i">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="sdd" disabled="true" />
JS
$(function(){
var $sdd = $('#sdd');
$('#selectbox').on('change', function(){
if($(this).val()==='0'){
$sdd.prop("disabled", false);
}else{
$sdd.prop("disabled", true);
}
})
});
Also check https://jsfiddle.net/k5gy365k/3/
You need to update your code,
HTML
<select id="selectbox" name="mfi_4_a_i">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="mfi_4_a_ii" id="sdd" />
JS
$("#selectbox").change(function() {
changetextbox();
});
function changetextbox(){
if (document.getElementById("selectbox").value === '0') {
document.getElementById("sdd").disabled = true;
} else {
document.getElementById("sdd").disabled = false;
}
}
See the example: https://jsfiddle.net/8mag64es/6/
And if you want more cleaner jquery way, you can update your JS code as below,
var selectbox = $("#selectbox"),
textbox = $("#sdd");
selectbox.change(function() {
changetextbox();
});
function changetextbox(){
if (selectbox.val() === '0') {
textbox.prop('disabled', true);
} else {
textbox.prop('disabled', false);
}
}
Example: https://jsfiddle.net/8mag64es/8/
I would like to show a message when someone makes a specific selection from an HTML dropdown list. I have this so far:
<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
And the script:
$(document).ready(function() {
$('#configoption[56]').change(function() {
var selectedValue = $('#configoption[56]').find(":selected").text();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
The above does not appear to be working for me, any suggestions? I would also like to be able to show the message on multiple selected values.
Well your .change function is specifically binded to an element with id="configoption[56]" So just add id to your select element as below
<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()">
//Options
</select>
UPDATE
As per #T.J.Crowder's suggestion on invalid selector I would like to modify a slight change on the id. You can use configoption56 as id and write your select.change as follows:
<select name="configoption[56]" id="configoption56" onchange="recalctotals()">
<!--Options-->
</select>
.change
$('#configoption56').change(function() {
//other codes
});
$('#configoption[56]') is looking for an element with the id, not name, configoption[56] (or it would be, but the selector is invalid, you'd have to escape those brackets).
To use the name:
$('select[name="configoption[56]"]')...
Separately, you can just use val, you don't have to use find to get the selected option. You can also use toggle for show/hide:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
$('.message').toggle($(this).val() == '235');
});
});
Re your comment about toggling based on || and two values:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
var value = $(this).val();
$('.message').toggle(value == '235' || value == '123');
});
});
I should be doing it like this: http://jsfiddle.net/nmn17cr6/
HTML:
<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
CSS:
.message {
display:none;
}
jQuery:
$(document).ready(function() {
$('#configoption').change(function() {
var selectedValue = $(this).val();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
Your approach needs a little modification. All you had to do these changes
$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
var selectedValue = $('#configoption[56]').val(); // and val to get the value
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
And with the same jQuery code. below has to be
<select name="configoption[56]" >
// onchange="recalctotals()"> was not required
I have 3 buttons with Y/N values. And 1 select box.
Following is the JSP code.
JSP
<script type="text/javascript">
$(document).ready(function() {
$('#BUTTON_1').on('click', function() {
alert("### BUTTON_1=> " + $('#BUTTON_1').val());
});
});
<td>
<td>
<select id="selectBox" name="selectBox">
<option value="R01"> NOT FINISHED </option>
<option value="R02"> FINISHED </option>
</td>
</td>
<td>
BUTTON 1
BUTTON 2
BUTTON 3
</td>
I have 2 questions.
1) How to code so that when I click on BUTTON 1, it toggles to name BUTTON 1_Y with value Y?
2) Only when all three buttons are toggled, so their values all change to Y, the 'FINISHED' option in select box appears. When not all three buttons have been clicked, or toggled, their values still remain as N and only NOT FINISHED option appears.
Im stuck on this for hours. Can anyone help me out?
You could try this:
JSFiddle DEMO
JS
$(function(){
$(".btnA").click(function(){
if($(this).attr("value")==="N"){
$(this).attr("value","Y");
$(this).html($(this).html()+"_Y");
}else{
$(this).attr("value","N");
$(this).html($(this).html().replace("_Y",""));
}
var $option = $("#selectBox option");
//check if all button are toggled
if($('.btnA[value="N"]').length===0){
$option.val("R02");
$option.html("FINISHED");
}else{
$option.val("R01");
$option.html("NOT FINISHED");
}
});
});
HTML
<select id="selectBox">
<option value="R01">NOT FINISHED</option>
</select>
BUTTON 1
BUTTON 2
BUTTON 3
So all you need to Do is:
JAVASCRIPT:
$(document).ready(function() {
$allToggled = 0;
$('.btnA').on('click', function() {
if($(this).val() == 'N'){
$(this).val('Y');
$allToggled++
}
else if($(this).val() == "Y"){
$(this).val("N")
$allToggled--;
}
if($allToggled == $(".btnA").length()){ // length making sure this is done for as may buttons you have by the same class name
$("#selectBox").val("R02").trigger("change"); // Note that trigger is written so that you may use the native event at later stage.
}
});
});
HTML:
<td>
<td>
<select id="selectBox" name="selectBox">
<option value="R01"> NOT FINISHED </option>
<option value="R02"> FINISHED </option>
</td>
</td>
<td>
BUTTON 1
BUTTON 2
BUTTON 3
</td>
try it
$(document).ready(function(){
$(".btnA").click(function(){
if($(this).attr("value")=="Y"){
$(this).attr({"value":"N"})
}else{
$(this).attr({"value":"Y"})
}
var boolStatus = true;
$.each($(".btnA"),function(i,item){
if($(item).attr("value")=="N")
boolStatus = false;
});
if(boolStatus){
$("#selectBox").val("R02");
}else{
$("#selectBox").val("R01");
}
});
});
Or see demo
jsfiddle.net/xccbV/1/
Use the following javascript
$('#BUTTON_1').on('click', function() {
if($(this).html().indexOf('Y') == -1 ) { // check if already clicked or not
$(this).html($(this).html() + '_Y');
$(this).val('Y');
checkSelected();
}
}); //add other button same like this
var checkSelected = function () {
var toggle = true;
$('.btnA').each(function () {
if($(this).val() === 'N') { toggle = false; }
});
if(toggle) {
$('option.finished').prop('selected', true);
}
}
Check http://jsfiddle.net/raunakkathuria/Ss8a9/1/
updated html added classes to options
<option value="R01" class="notfinished"> NOT FINISHED </option>
<option value="R02" class="finished"> FINISHED </option>
I want to hide a table row based on the value selected from a radio button.
Those radio buttons were created based on value selected from a dropdown list box.
Here is my code
HTML code for listbox
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Jquery
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
Now if radio button 2 is selected, then the table row with tr2 should disappear.
Please help me to find the solution.
EDIT
I tried the following JavaScript, but it does not hide the row.
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
Could you please suggest what is wrong here?
You can just use the hide and show function of jQuery like so:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
If you don't want the table row to show up by default, just do it with css.
JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/
Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });
I implement jquery multiselect and its working properly now i need to add extra feature that when a user select another option in dropdown ( check another checkbox ) then i want to get the value of the related option
in above picture in did not insert checkbox it is automatically inserted by jquery now i want that if i select the check =box with XYZ then i want to get the value of XYZ which is the id of XYZ
here is how i implemented it
<select multiple="multiple" id="CParent" name="parent" class="box2 required">
#foreach (var item in Model.Categories.OrderBy(c => c.Name))
{
if (Model.Coupon.Categoryid.Id == item.Id)
{
<option selected="selected" value="#item.Id">#item.Name</option>
}
else
{
<option value="#item.Id">#item.Name</option>
}
}
</select>
and it is how it looks like after rendering in browser source
Thanks in advance for helping me .
what i tried yet
$('#CParent input:checked').change(function () {
var parentid = $(this).val()+'';
var array = parentid.split(",");
alert(array);
getchildcat(array[array.length -1]);
});
});
Edit
Code to initialize multiselect
$("#CParent").multiselect({
header: "Choose only THREE items!",
click: function () {
if ($(this).multiselect("widget").find("input:checked").length > 3) {
$(warning).show();
warning.addClass("error").removeClass("success").html("You can only check three checkboxes!");
return false;
}
else if ($(this).multiselect("widget").find("input:checked").length <= 3) {
if ($(warning).is(":visible")) {
$(warning).hide();
}
}
}
});
try this
$('#CParent').val();
this will give you the selectbox value
OR
from docs
var array_of_checked_values = $("#CParent").multiselect("getChecked").map(function(){
return this.value;
}).get();