使用JavaScript更改隐藏字段的值

Question

我很难理解这段代码，因为我是Javascript / HTML / C＃Razor的新手，

目前我有以下

<li class="control-group">
        <label for="autoReload" class="control-label">Auto Reload</label>
        <div class="controls">
            <div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
                <button type="button" data-value="no" class="btn active">No</button>
                <button type="button" data-value="yes" class="btn">Yes</button>
            </div>
            <input type="hidden" class="radioHidden" value="'$'+@(Model.IsAutoReload ? "True" : "False")" id="autoReload" name="IsAutoReload">
        </div>
</li>

我要做的是单击“否”按钮，将文本框中的值更改为“ False”，或者如果单击“ true”，则希望将该值更改为“ true”

我发现以下Javascript，

   <script>
        $(document).ready(function(){

            $("#autoReload").on('change',function(){
                if ($(this).val() == 'yes') {
                    $(".saveCardSwitch button[data-value='true']").trigger('click');
                    $(".saveCardSwitch button").each(function(){
                        $(this).addClass('disabled').prop('disabled',true);
                    });
                }
                if ($(this).val() == 'no') {
                    $(".saveCardSwitch button").each(function(){
                        $(this).removeClass('disabled').prop('disabled',false);
                    });
                }
            });

        });
   </script>

现在，我已经尝试将按钮上的实际数据值切换为true / false，但是当我这样做时，我打开的隐藏消息不再显示了，因此我有点停滞不前。 我还要澄清一下，当我调用@（Model.IsReload？“ True”：“ False”时，它将值通过post方法传递回我的控制器，对吗？

Answer 1

使用Jquery时，可以通过以下方式进行：

$('.btn').click(function(){
   $('.radioHidden').val($(this).attr('data-value') === 'yes');
});

小提琴

Answer 2

据我了解，您所需要的只是一个为特定元素设置值的函数。 您可以使用以下代码进行操作

<li class="control-group">
<label for="autoReload" class="control-label">Auto Reload</label>
<div class="controls">
    <div class="btn-group radioButtons radioToggleCollapse" data-toggle-id="#autoReloadExtra" data-toggle="buttons-radio">
        <button type="button" data-value="no" onclick="setValue(false, 'autoReload');" class="btn active">No</button>
        <button type="button" data-value="yes" onclick="setValue(true, 'autoReload');" class="btn">Yes</button>
    </div>
    <input type="hidden" class="radioHidden" value="" id="autoReload" name="IsAutoReload">
</div>

并且您的函数setValue可以类似于：

var setValue = function(value, id)
{
    var domEl = document.getElementById(id);
    domEl.value = value;
}

Answer 3

您似乎没有任何事件要绑定到要用于切换的按钮，这是您需要的第一件事，可以通过onclick事件来执行此操作

<button type="button" data-value="no" onclick="updateHidden(this.dataset.value)" class="btn active">No</button>
<button type="button" data-value="yes" onclick="updateHidden(this.dataset.value)" class="btn">Yes</button>

那么更新隐藏输入的代码是

function updateHidden(value){
value = value==="yes"?"TRUE":"FALSE";
document.getElementById("autoReload").value = value;
}