Jquery: Enable one form field and disable other when checkbox is clicked -
i looking better solution achieve subject.
when checkbox clicked, disable select box , enable input field , vise versa. code
<div class="col-md-4 col-lg-4"> <select class="form-control recipe_cats otherrecipe_cat" id="recipe_cats" name="recipe_cats"> <option value="-1">books category</option> <option value="30" class="level-0">book1</option> <option value="48" class="level-0">book2</option> <option value="49" class="level-0">book3</option> </select> </div> <div class="col-md-3 col-lg-3"> <label class="control-label checkbox-inline" for="lblothercats">not listed</label> <sup><i class="fa fa-asterisk"></i></sup> <input class="form-control" type="checkbox" name="lblothercats" id="lblothercats" value="option1"> <span class="help-block"></span> </div> <!-- /.form-group --> <div class="col-md-4 col-lg-4"> <label class="control-label" for="otherrecipe_cat">other category</label> <sup><i class="fa fa-asterisk"></i></sup> <input type="text" class="form-control otherrecipe_cat" name="otherrecipe_cat" id="otherrecipe_cat" value="" role="input" aria-required="true" disabled="disabled" /> <span class="help-block"></span> </div><!-- /.form-group -->
and current code is
$('#lblothercats').change(function () { if (this.checked) { $('input.otherrecipe_cat').removeattr('disabled'); $('select.recipe_cats').attr('disabled', 'disabled'); } else { $('select.recipe_cats').removeattr('disabled'); $('input.otherrecipe_cat').attr('disabled', 'disabled'); } }).trigger('change');
this works fine, wondering if there better option or solution achieve this? writing many segments this.
regards
this works fine, wondering if there better option or solution achieve this?
you can improve like:
$('#lblothercats').change(function () { $('select.recipe_cats').prop('disabled', this.checked); $('input.otherrecipe_cat').prop('disabled', !this.checked); }).trigger('change');
you should use .prop() instead of .attr(), go through .prop() vs .attr()
Comments
Post a Comment