带有无线电的JavaScript条件字段不起作用

I'm trying to create a form with Bootstrap (jQuery) using a small script given a condition (selection on a radio button) one or the other elements are displayed.

我正在尝试使用一个小脚本创建一个带有Bootstrap(jQuery)的表单给定条件(在单选按钮上选择),显示一个或其他元素。

It isn't working for me, there are no errors in the debugger but it performs the action.

它对我不起作用,调试器中没有错误但它执行操作。

What am I doing wrong?

我究竟做错了什么?

<div class="form-group">
    <div class="radio">
        <label>
            <input type="radio" name="typeStorage" id="typeStorageRemote" value="typeStorageRemote" checked>
            Recommended option. Backup stored on remote server using rsync + ssh
        </label>
    </div>
    <div class="radio">
        <label>
//On original value was wrong. I (same value on all radio)
            <input type="radio" name="typeStorage" id="typeStorageLocal" value="typeStorageLocal">
            Options not recommended. Backup stored in device mounted locally
        </label>
    </div>
</div>
<!-- All components tabs storage -->
<!-- Option Remote -->
<div class="form-group" id="groupRemote">
    <div class="form-group">
        <label for="storageServer" class="col-sm-2 control-label">Server (Hostname or Ip)</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="storageServer" placeholder="Server">
        </div>
    </div>
    <div class="form-group">
        <label for="storagePort" class="col-sm-2 control-label">Server port</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="storagePort" placeholder="Port">
        </div>
    </div>
</div>
<!-- Option local -->
<div class="form-group hidden" id="groupLocal">
    <label for="storageLocal" class="col-sm-2 control-label">Local path</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="storageLocal" placeholder="Local">
    </div>
</div>

Script loaded after jquery.js`:

在jquery.js`之后加载脚本:

$( document ).ready(function() {
    var typeStorage = $('#formSettings input:radio[name=typeStorage]');
    // Wrappers
    var inRemote = $('#formSettings #groupRemote');
    var inHome   = $('#formSettings #groupLocal');
    var all      = inRemote.add(inHome); // shortcuts

    typeStorage.change( function() {
        var value=this.value;
        all.addClass('hidden'); // hide all and show when need
        if (value == 'typeStorageRemote') {
            inRemote.removeClass('hidden'); // show grup groupRemote
        } else {
            inHome.removeClass('hidden'); // show grup groupLocal
        }
    });
});

Develop URL (deactivate all routes) http://dashboard.cprsync.com/settings

开发URL(停用所有路由)http://dashboard.cprsync.com/settings

2 个解决方案

#1

It is bad practice to have non-unique id attributes on a page. Also, as mentioned in the comments by depperm and Stefan Dochow, the name variable should be unique too.

在页面上使用非唯一ID属性是不好的做法。另外,正如depperm和Stefan Dochow的评论中所提到的,名称变量也应该是唯一的。

2 个解决方案

#1

更多相关文章

随机推荐