title: How to disable the next button in slick plugin?
body: <p>Basically i am trying to create the quiz, I'm using slick plugin for carousel effect. Only on the selection of the answer the next button should be enabled.On page load the next button gets disabled after selecting the answer for that particular question the next button gets enabled. If we click on next we will get the next question,in that next button should be disabled. After selecting the answer for that the next button gets enabled and so on.</p>
  
  <p>Html code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
        &lt;link rel="styleSheet" href="css/slick.css"/&gt;
        &lt;link rel="styleSheet" href="css/style.css"/&gt;
     &lt;/head&gt;
     &lt;body&gt;
     &lt;!-- &lt;button&gt;+&lt;/button&gt;
     &lt;button&gt;-&lt;/button&gt; --&gt;
        &lt;div class="parent_container one-time"&gt;
           &lt;div id="q_id_1"&gt;
              &lt;h4 style="text-align: left;"&gt;1) How do you access a function fetch() from a h1 element in JSX?&lt;/h4&gt;
              &lt;pre&gt;&lt;/pre&gt;
              &lt;div&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_1_1" name="q_1" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;&amp;lt;h1&amp;gt;{fetch()}&amp;lt;&lt;span class="hljs-regexp"&gt;/h1&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_1_2" name="q_1" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentWillMount&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_1_3" name="q_1" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;&amp;lt;h1&amp;gt;{fetch}&amp;lt;&lt;span class="hljs-regexp"&gt;/h1&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_1_4" name="q_1" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;&amp;lt;h1&amp;gt;${fetch}&amp;lt;&lt;span class="hljs-regexp"&gt;/h1&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div id="q_id_2"&gt;
              &lt;h4 style="text-align: left;"&gt;2) Which method in a React Component should you override to stop the component from updating?&lt;/h4&gt;
              &lt;pre&gt;&lt;/pre&gt;
              &lt;div&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_2_1" name="q_2" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;willComponentUpdate&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_2_2" name="q_2" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;shouldComponentUpdate&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_2_3" name="q_2" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentDidUpdate&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_2_4" name="q_2" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentDidMount&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div id="q_id_3"&gt;
              &lt;h4 style="text-align: left;"&gt;3) What's used to pass data to a component from outside?&lt;/h4&gt;
              &lt;pre&gt;&lt;/pre&gt;
              &lt;div&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_3_1" name="q_3" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;setState&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_3_2" name="q_3" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;render &lt;span class="hljs-keyword"&gt;with&lt;/span&gt; &lt;span class="hljs-built_in"&gt;arguments&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_3_3" name="q_3" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt; PropTypes&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_3_4" name="q_3" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;props&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
           &lt;/div&gt;
           &lt;div id="q_id_4"&gt;
              &lt;h4 style="text-align: left;"&gt;4) Which method in a React Component is called after the component is rendered for the first time?&lt;/h4&gt;
              &lt;pre&gt;&lt;/pre&gt;
              &lt;div&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_4_1" name="q_4" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentDidUpdate&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_4_2" name="q_4" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentDidMount&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_4_3" name="q_4" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentMounted&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
                 &lt;ul&gt;
                    &lt;li&gt;&lt;input type="radio" id="radio_4_4" name="q_4" value="on"&gt;&lt;/li&gt;
                    &lt;li class="code"&gt;
                       &lt;pre&gt;&lt;code class="javascript hljs"&gt;componentUpdated&lt;/code&gt;&lt;/pre&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/div&gt;
                     &lt;button id="submit_button"&gt;Submit&lt;/button&gt;
                     &lt;br /&gt;
           &lt;/div&gt;
         &lt;/div&gt;
         &lt;script type="text/javaScript" src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javaScript" src="js/slick.min.js"&gt;&lt;/script&gt; 
          &lt;script type="text/javaScript" src="js/script.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Css code:</p>
  
  <pre><code>ul li {
    display: inline-block;
  }
  ul {
    list-style-type: none;
  }
  </code></pre>
  
  <p>Js code:</p>
  
  <pre><code>$('.one-time').slick({
   dots: false,
    infinite: false,
    speed: 800,
    slidesToShow: 1,
    adaptiveHeight: true,
     onAfterChange: function(slide, index) {
          if(index){
           $('button.slick-next.slick-arrow').attr('disabled','disabled');
          }
      }
  });
  $('input[type="radio"]').on('click',function(){
      $('button.slick-next.slick-arrow').removeAttr('disabled');
  })
  </code></pre>