Question

我以前有单选按钮，但我更改了脚本以使用bootstrap复选框。但是在使用自举开关时它并没有改变状态。

这是我的代码片段：

<div class="form-group">
    <div class="radio-list">
        <label class="radio-inline">
            <input type="radio" name="upd_active" class="updactive" id="upd_yes" value="1" checked> Yes </label>
            <label class="radio-inline">
            <input type="radio" name="upd_active" class="updactive" id="upd_no" value="0"> No </label>
    </div>
</div>
<script>
    function action(){}
        var parentflag = $('#upd_yes').parents('.form-group');
        parentflag.find('span').removeClass('checked');
        if(is_active == "1"){
            $("#upd_no").attr('checked', false);
            $("#upd_yes").attr('checked', true);
            $('#upd_yes').parent().addClass('checked');
        }
        else{
            $("#upd_yes").attr('checked', false);
            $("#upd_no").attr('checked', true);
            $('#upd_no').parent().addClass('checked');
        }
    }
    </script>

<div class="form-group">
<label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
     <div class="col-md-8">
         <input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
     </div>
</div>

<script>
    function action(){
        var parentflag = $('#upd_yes').parents('.form-group');
        parentflag.find('span').removeClass('checked');
        if(is_active == "1"){
            $("#upd_yes").attr("checked",true);
            $('#upd_yes').parent().addClass('checked');
        }
        else{
            $("#upd_yes").attr("checked",false);
            $('#upd_yes').parent().removeClass('checked');
        }
    }
</script>

我该如何解决这个问题？

Answer 1

能够找到2个问题（实际上不是问题），如下所示

is_active未声明，因此您无法使用if statement
最重要的是，您的action()功能根本没有启动。

所以我添加了以下代码并更新了代码段。

var is_active = 0;
action();

＆＃13;

var is_active = 0;
action();

function action() {
  var parentflag = $('#upd_yes').parents('.form-group');
  parentflag.find('span').removeClass('checked');
  if (is_active == "1") {
    $("#upd_yes").attr("checked", true);
    $('#upd_yes').parent().addClass('checked');
  } else {
    $("#upd_yes").attr("checked", false);
    $('#upd_yes').parent().removeClass('checked');
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-md-3 control-label">IsActive<span class="text-danger">*</span></label>
  <div class="col-md-8">
    <input type="checkbox" name="upd_active" class="make-switch updactive" id="upd_yes" value="1" checked>
  </div>
</div>

＆＃13;

Bootstrap复选框按钮不改变状态

1 个答案: