javascript - selecting specific element within one parent -
this html form structure:
edit: each section generated php script, , section id change depending on user input. not able use whole selector because of this
<section id="janedoe"> <div class="gcolumn1">jane doe</div> <div class="gcolumn2">color: <input type="radio" name="chk_clr[]" id="chk_clr[]" value="y">yellow <input type="radio" name="chk_clr[]" id="chk_clr[]" value="r">rose <br>food: <input type="radio" name="janedoe-chk_food[]" id="chk_food[]" value="y">yes <input type="radio" name="janedoe-chk_food[]" id="chk_food[]" value="n">no</div> <div class="gcolumn3"> <select id="meal[]" disabled> <option value=""></option> <option value="chicken">chicken</option> <option value="beef">beef</option> <option value="vegetarian">vegetarian</option> <option value="other">other</option> </select> </div> <div style="clear: both; height: 5px;"> </div> <section id="johnsmith"> <div class="gcolumn1">johnsmith</div> <div class="gcolumn2">color: <input type="radio" name="chk_clr[]" id="chk_clr[]" value="y">yellow <input type="radio" name="chk_clr[]" id="chk_clr[]" value="r">rose <br>food: <input type="radio" name="johnsmith-chk_food[]" id="chk_food[]" value="y">yes <input type="radio" name="johnsmith-chk_food[]" id="chk_food[]" value="n">no</div> <div class="gcolumn3"> <select id="meal[]" disabled> <option value=""></option> <option value="chicken">chicken</option> <option value="beef">beef</option> <option value="vegetarian">vegetarian</option> <option value="other">other</option> </select> </div> <div style="clear: both; height: 5px;"> </div> </section> i'd dropdown meal[] enabled after chk_food[] selected yes. however, having trouble figuring out how tell jquery enable dropdown box within same section. have jquery: (i added alert boxes see part of code not working)
var update_meal = function () { alert ("hi"); var sec_id = $(this).closest("section").attr("id"); alert (text(sec_id)); if ($(sec_id + "> #chk_food[]").is(":checked")) { $(sec_id + "> #meal[]").prop('disabled', false); } else { $(sec_id + "> #meal[]").prop('disabled', 'disabled'); } }; $(update_meal); $("#chk_food[]").change(update_meal); when tried run on jsfiddle, no bugs show up, coding doesn't work @ all. see alert box popping "hi" document loads
thank help
you can't have multiple elements on same page same id. invalid html , confuse code terribly. work, first need use classes find things:
<section> <div class="gcolumn1">johnsmith</div> <div class="gcolumn2">color: <input type="radio" name="chk_clr[]" value="y">yellow <input type="radio" name="chk_clr[]" value="r">rose <br>food: <input type="radio" name="johnsmith-chk_food[]" class="chk_food yes" value="y">yes <input type="radio" name="johnsmith-chk_food[]" class="chk_food no" value="n">no </div> <div class="gcolumn3"> <select name="meal[]" class="meal" disabled> <option value=""></option> <option value="chicken">chicken</option> <option value="beef">beef</option> <option value="vegetarian">vegetarian</option> <option value="other">other</option> </select> </div> <div style="clear: both; height: 5px;"> </div> </section> then can start target things correctly. this:
$(".chk_food").on("change", function() { $(this) .closest("section") .find("select.meal") .prop("disabled", $(this).is(".no")); }); in case, bind change handler on both yes , no food radios. handler called 1 user clicks on, inherently turning 1 "on". find parent section, , meal select within it, , set disabled property true if .yes radio , false if .no radio.
i think should it.
Comments
Post a Comment