点击红色的字会弹出不同的弹框，点击我已阅读并同意，红色的字就会变灰表示已阅读，两个都已经阅读过，input框就可以打钩，该用什么进行判断？颜色吗，该怎么写

点击红色的字会弹出不同的弹框，点击我已阅读并同意，红色的字就会变灰表示已阅读，两个都已经阅读过，input框就可以打钩，该用什么进行判断？颜色吗，该怎么写

弹框

               <p>
                    <span class="clause_input_t" id='user_checked_name' @click="togglename($event)">span>
                    <span style="color: #000;">
                      本人已阅读
                      <a class="xxzc" style="color: red;" @click="toggleuser_show()">《用户信息授权及个人信息保护政策》a>
                      <a class="cqtk" style="color: red;" @click="togglename_show()">《实名查验登记授权条款》a>
                      内容，并同意授权。
                    span>
                  p>

<div class="document_user" style="display: none;">
          <div class="huaxui-mask huaxui-animate-fade-in" @click="stopReaduser_mask">div>
          <div class="huaxui-picker huaxui-half-screen-dialog huaxui-animate-slide-up">
            <div class="huaxui-half-screen-dialog__hd">
              <ul style="width: 100%">
                <li style="width: 100%;font-size: .6rem">授权条款li>
              ul>
            div>
            <div class="huaxui-half-screen-dialog__gd">
              <div style="display: block;overflow-y: scroll;" class="noticeBox_name">
                      lalalallallalalala：<br>
      1、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊；<br>
      2、白边白边不不不不不不不不不不不不不不不不不不不不。
              div>
            div>
            <div class="huaxui-half-screen-dialog__ft">
              <button class="dialog-ft-button" style="float: none;" @click="stopReaduser">我已阅读并同意button>
            div>
          div>
        div>
        <div class="document_name" style="display: none;">
          <div class="huaxui-mask huaxui-animate-fade-in" @click="stopReadname_mask">div>
          <div class="huaxui-picker huaxui-half-screen-dialog huaxui-animate-slide-up">
            <div class="huaxui-half-screen-dialog__hd">
              <ul style="width: 100%">
                <li style="width: 100%;font-size: .6rem">授权条款li>
              ul>
            div>
            <div class="huaxui-half-screen-dialog__gd">
              <div style="display: block;overflow-y: scroll;" class="noticeBox_name">
                      为实现个人保险实名制管理目的的需要，本人同意：<br>
      1、啊啊啊啊啊啊啊啊啊啊；<br>
      2、。
              div>
            div>
            <div class="huaxui-half-screen-dialog__ft">
              <button class="dialog-ft-button" style="float: none;" @click="stopReadname">我已阅读并同意button>
            div>
          div>
        div>

 stopReadname:function(){
      $(".document_name").hide();
      $("#user_checked_name").addClass("clause_input_checked");
      $(".cqtk").addClass("smyd");
    },
    //   
    stopReaduser:function(){
      $(".document_user").hide();
      $(".xxzc").addClass("smyd");
    },
    stopReaduser_mask:function(){
      $(".document_user").hide();
    },

    stopReadname_mask:function(){
      $(".document_name").hide();
    },
    stopRead_maskF:function(){
      $(".document_t").hide();
    },

.smyd{
    color: #999!important;
}
.clause_input_t{
    height: 0;
    position: relative;
}
.clause_input_t:before{
    position: relative;
    vertical-align: middle;
    top: 50%;
    left: 0;
    content: "";
    width: 0.83rem;
    height: 0.83rem;
    margin-top: -0.37rem;
    display: inline-block;
    box-sizing: border-box;
    background: url(../images/icon_check.png) no-repeat 0 0;
    text-decoration: none;
    border-radius: 0;
    -webkit-font-smoothing: antialiased;
    background-size: cover;
}
.clause_input_checked:before {
  background: url(../images/icon_check.png) no-repeat 0 100%;
  background-size: cover;
  margin-top: -0.05rem;
}

也就是说 input 能打勾 是两个状态影响 。那你用两个变量记录一下 这两个状态。
1.我已同意 就是true flag
2.边红色 的时候 也 记录一下 flag1

然后 是否能打勾 就判断
if(flag&&flag1){
//才能打勾
}

。。 你这用了vue 还用了大量jq去处理 。。。。