I've looked through about 10 similar questions, but haven't found a solution to my situation. I'm not sure if my problem is in the selector, the way I'm testing "if", or the way I'm trying to show/hide the field.
I want to hide the input where name="wpbpp_settings[slideshowSpeed]" if the value of the radio button name="wpbpp_settings[slideshow]"is "false"
Here's my form:
<div class="wrap">
<h2>WP Blossom PuckPros Theme Options</h2>
<form method="post" action="options.php">
<?php settings_fields('wpbpp_settings_group'); ?>
<h4><?php _e('Excerpt Length for Wide Page Slider', 'wpbpp_domain'); ?></h4>
<p>
<label class="description" for="wpbpp_settings[excerpt_length]"><?php _e('Enter the excerpt length (number of words)', 'wpbpp_domain'); ?></label>
<input id="wpbpp_settings[excerpt_length]" name="wpbpp_settings[excerpt_length]" type="number" min="20" max="55" step="1" value="<?php echo $wpbpp_options['excerpt_length']; ?>"/>
</p>
<h4><?php _e('Settings for Wide Slider', 'wpbpp_domain'); ?></h4>
<?php
if (!isset($wpbpp_options['slideshow'])) {
$wpbpp_options['slideshow']='false';
}
?>
<p>
<label class="description" for="wpbpp_settings[slideshow]"><?php _e('Do you want the slider to advance automatically?', 'wpbpp_domain'); ?></label>
<input id="wpbpp_settings[slideshow]1" name="wpbpp_settings[slideshow]" type="radio" <?php if($wpbpp_options['slideshow'] == 'true') echo 'checked="checked"'; ?> value="true" />Yes
<input id="wpbpp_settings[slideshow]2" name="wpbpp_settings[slideshow]" type="radio" <?php if($wpbpp_options['slideshow'] == 'false') echo 'checked="checked"'; ?> value="false" />No
</p>
<p>
<label class="description" for="wpbpp_settings[slideshowSpeed]"><?php _e('How often do you want the slider to advance (number of seconds)?', 'wpbpp_domain'); ?></label>
<input id="wpbpp_settings[slideshowSpeed]" name="wpbpp_settings[slideshowSpeed]" type="number" min="1" max="8" step="1" value="<?php echo $wpbpp_options['slideshowSpeed']; ?>"/>
</p>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Options', 'wpbpp_domain'); ?>" />
</p>
</form>
</div>
and my jquery:
<script type="text/javascript">
jQuery(document).ready(function($) {
togglefields();
$('input:radio[name="wpbpp_settings[slideshow]"]').val().change(function() { togglefields(); });
});
function togglefields() {
if ($('input:radio[name="wpbpp_settings[slideshow]"].prop("checked", true)').val() =="true") {
$('input:radio[name="wpbpp_settings[slideshowSpeed]"]').show();
} else {
$('input:radio[name="wpbpp_settings[slideshowSpeed]"]').hide();
}
</script>
_______ EDIT ______________
So now I've got in closer. My problem is that my "if" statement always evaluates to "true".
Here's the revised jquery:
<script type="text/javascript">
jQuery(document).ready(function($) {
togglefields();
$('input[name="wpbpp_settings[slideshow]"]').change(function(){ togglefields() });
});
function togglefields() {
if (jQuery('input[name="wpbpp_settings[slideshow]"]').val() =="true") {
jQuery('input[name="wpbpp_settings[slideshowSpeed]"]').show();
alert ('show');
} else {
jQuery('input[name="wpbpp_settings[slideshowSpeed]"]').hide();
alert ('hide');
}
}
</script>