using jquery .ready() to manipulate chained checkboxes within typo3

问题

Using jquery, given multiple checkboxes, we can toggle a fieldset on/off if a particular checkbox is checked/ unchecked. Also, if a checkbox is checked by default, the corresponding fieldset will be displayed upon page load. See http://jsfiddle.net/Hbmpk/1/ However, if this is done within Typo3, the fieldset is not displayed upon page load.

Here is the typoscript:

page.includeJSlibs.jquery.external = 1
page.includeJSlibs.jquery = http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

 page.headerData.10 = TEXT
 page.headerData.10.value (
   <script type="text/JavaScript">
    #show fieldset on page load if checkbox checked  
    $(document).ready(function() {$('#showfruit').toggle($('#fruitid').prop('checked')); });

   #toggle fieldsets
   $(window).load(function(){
   $('#fruitid').change(function(e) {
     $('#showfruit').toggle(this.checked);
});
$('#vegid').change(function(e) {
    $('#showveg').toggle(this.checked);
});
});
   </script>
 )

Here is the html:

<form>
 Which food group do you like?
 <!-- Fruit is checked by default -->
 Fruit <input type="checkbox" name="nutrition[]" value="Fruit" id="fruitid" checked="checked">
 Veges <input type="checkbox" name="nutrition[]" value="Vegetables" id="vegid">

<!-- toggle fieldsets if checkbox is checked -->
<!-- display showfruit fieldset on page load -->
<fieldset id="showfruit" style="display:none;">
 You chose Fruit! Name one fruit: <input type="text" name= "afruit" />
</fieldset>
<fieldset id="showveg" style="display:none;" >
 You chose Veges! Name one veg: <input type="text" name= "aveg" />
 </fieldset>
 </form>

This is a simplification of an attempt to use typo3-formhandler validation together with chained checkboxes and inputs; the toggling works fine initially, but when the form is submitted, validated and returned(if compulsory question not answered for example), then the checkboxes remain checked but the corresponding fieldsets that were show are now no longer shown.

ps, the jquery is thanks to Jason P - jquery: toggle a fieldset based upon a specific checked checkbox in an array of multiple checkboxes

回答1:

The TYPO3 extension jquerycolorbox was also active. jquerycolorbox probably includes a version of jquery that is less than 1.6 and therefor does not support .prop() Including a later version of jquery on top of jquerycolorbox did not help and was inherently incorrect practice.

Deactivating jquerycolorbox and including jquery 1.10.2/jquery.min.js works fine.

Given that the page in question actually uses TYPO3 formhandler validation, perhaps the best solution would be some typoscript that takes the initial form submission results and then where relevant defines the entire field set, say ###fruit_fieldset### ...

来源：https://stackoverflow.com/questions/17909532/using-jquery-ready-to-manipulate-chained-checkboxes-within-typo3

标签

jquery

typo3