jQuery 单选按钮值在页面加载时未更改

Question

我在网上搜索并尝试了所有来自 SO 的类似问题的解决方案，但就是无法解决这个问题。

我在 Django 管理员工作，我有 RadioSelect 字段 is_valid 小部件，有两个单选按钮，形式为：

 <div class="form-row field-is_valid">       
    <div>           
        <label for="id_is_valid_0">Is it valid?</label>
                        
        <ul id="id_is_valid" class="inline">
            <li><label for="id_is_valid_0"><input type="radio" name="is_valid" value="True" id="id_is_valid_0" checked>
                    Yes
                </label>
            </li>
            <li><label for="id_is_valid_1"><input type="radio" name="is_valid" value="False" id="id_is_valid_1">
                    No
                </label>
            </li>
        </ul>   
    </div>      
</div>

<div class="form-row field-not_valid_reason">
    <div>
        <label for="id_not_valid_reason">Reason:</label>
        <select name="not_valid_reason" id="id_not_valid_reason">
          <option value="" selected>Choose</option>
          <option value="Expired">Expired</option>
          <option value="Not adopted">Not adopted</option>
          <option value="Unknown">Unknown</option>
        </select>             
    </div>
</div>

我想在选中 'Yes' (True) 时隐藏 class .field-not_valid_reason（这是 is_valid 字段的默认设置）并显示它当我点击 'No'。这个我做到了。这是我的 jQuery 代码：

 (function($) {
    $(function() {
        var isValid = $('input[type=radio][name=is_valid]'),
            notValidReason = $('.field-not_valid_reason'),


            function toggleFields(value) {
                if (value === 'True') {
                    notValidReason.hide(250);
                } else {
                    notValidReason.show(250);
                }
            }

        // show/hide on load based on previous value of isValid
        toggleFields(isValid.val());

        // show/hide on change
        isValid.change(function() {
            toggleFields($(this).val());
            alert(isValid.val());
        });
    });
})(django.jQuery);

但是，由于某种原因，在对象以 is_valid 字段 False 保存在数据库中之后，当我在该对象的更改页面上时，class .field-not_valid_reason 已隐藏，尽管活动单选按钮设置为“否”(False)。你能帮忙吗？

Answer 1

在您当前的 jquery 代码中，您使用 alert(isValid.val()); 来查看选择了哪个选项，但这只会给您第一个值，以便获得最新信息用户选择的值使用 $(this).val().

然后，将你加载到 radio 的正确值，但 div 仍然隐藏，因为你再次传递 toggleFields(isValid.val());，这只会给你第一个值。所以，到克服这个 radio 值 checked 即：$("input[name='is_valid']:checked").val() .

jQuery 单选按钮值在页面加载时未更改

jQuery radio button value is not changed on page load

javascript

jquery

django-forms

django-admin

radio-button