Search jQuery

jQuery Forum

jQuery Mobile

srikrish

Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

in jQuery Mobile • 11 years ago

Hi there,

I m new to development in JqueryMobile. This is about developing Register page using JQM with Jquery script.

I m thinking of having a Multiple Select Menu and asking the user(human) to select only Fruits values so that I can enable a Checkbox (I Agree to Terms --- see code below #CheckBoxTerms).

I was successful in enabling the SUBMIT button based on Checkbox ( #CheckBoxTerms) checked/unchecked status (see code below),

but similarly I try to do I am finding hard to complete .

Your help will be appreciated.

Regards

Srikrish

<div data-role="page" class="type-interior" id="greg">
<!-- other header info here -- >
<div data-role="content" data-theme="a">
<form id="myRegisterForm1">
<!-- other form fields here -- >
<div data-role="fieldcontain">
<label for="select-fruit" class="select">Select Fruits:(secure interaction)</label>
<select name="select-fruit" id="select-fruit" multiple="multiple" data-native-menu="false">
<option>Choose Fruits</option>
<option value="F">Apple</option>
<option value="V">Bean</option>
<option value="V">Carrot</option>
<option value="F">Grape</option>
<option value="F">Mango</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Understood the terms of <a href="#gtrm">User Policy</a></legend>
<input type="checkbox" name="CheckBoxTerms" id="CheckBoxTerms" value="iagree"/>
<label for="CheckBoxTerms" class="test"> I Accept </label>
</fieldset>
</div>
<fieldset class="ui-grid-a" >
<div class="ui-block-b"><button type="submit" data-theme="a" id="ButtonAcceptTerms" disabled="disabled">Submit</button></div>
</fieldset>
</form>
</div>
<!-- other footer info here -- >
</div>
// jquery script
<script>
$(document).ready(function() {
//////////////////////////////
$('input[name=CheckBoxTerms]').change(function() {
var chkbox_term_val = $('#CheckBoxTerms:checked').val();
if (chkbox_term_val == 'iagree'){
var cM = 'Thanks for Accepting Terms'; //custom message
$("<div id='notification' class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+cM+"</h1></div>")
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 800 )
.fadeOut( 800, function(){
$(this).remove();
});
$("#ButtonAcceptTerms").button('enable');
}
else {
var cM = 'Please Accept User Policy'; //custom message
$("<div id='notification' class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'><h1>"+cM+"</h1></div>")
.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 800 )
.fadeOut( 1200, function(){
$(this).remove();
});
$("#ButtonAcceptTerms").button('disable');
}
});
});
// my problem...
// need to enable #CheckBoxTerms if only FRUITS are selected and disable this Select
// otherwise allow user to try Fruit select...
$("select").change(displayVals);
displayVals();
function displayVals() {
var multipleValues = $("#select-fruit").val() || [];
var whereIn = jQuery.inArray("V", multipleValues);
var isFruits = 0;
if ( whereIn < 0 ) {
// alert("Fruits");
isFruits = 1;
}
else {
// alert("No Fruits");
isFruits = 0;
}
if (isFruits > 0) {
//alert("Correct Selection");
$('#CheckBoxTerms').removeAttr('disabled');
// also wanted to disable after correct selection but trying to find out
}
else {
//alert("Wrong Selection");
$('#CheckBoxTerms').attr('disabled', 'disabled');
}
}
</script>

Replies(3)

ollibruen..

Re: Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

11 years ago

http://jquerymobile.com/demos/1.0rc2/docs/forms/checkboxes/methods.html

srikrish

Re: Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

11 years ago

Thanks ollibruening for the direction, i used it and it works fine with small logical change. I really appreciate.

$("select#select-fruit").change(function () {
var strVal = "";
$("select option:selected").each(function () {
strVal += $(this).val();
});
if (strVal == "FFF") {
$("input[type='checkbox']").checkboxradio('enable');
$("input[type='checkbox']").attr("checked",false).checkboxradio("refresh");
}
else {
$("input[type='checkbox']").checkboxradio('disable');
}
})
.trigger('change');

srikrish

Re: Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

11 years ago

Hi, Thanks for all the support for the newbie enthusiast.

Please see above code 21st line (

) or 90-93 line in attached code.

As i said earlier the enabling of #CheckBoxTerms works fine in Win 7/Chrome/Opera/Fennec/etc.

If I run it on WinXP/Chrome/etc for test, only if i add disabled="disabled" attribute the CheckBoxTerms gets enabled. Can u pls. let me know where am i going wrong?

can u please advise. i have attached the code testcode.txt for review

thanks N regards

Top Reply

Response title

Attachments

jQuery Forum

Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

Replies(3)

Re: Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

Re: Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

Re: Enable AgreeTerms Checkbox based on Specific Multiple Select in JQueryMobile - Newbie

Statistics

Tags

Actions