<div class="p-5">

  First example demonstrates one question with three possible answers, two of them are true and one is false. Here what I actually need - no labels near checkboxes.  

  In future I will improve CSS and inline form design, this is just for demonstration

  <br ><br >

      The main problem is that I will have a lot of answer options and I don't what to add unused IDs just for keep labeles. When I tried to get rid of labels - I got no checkboxes and no radiobuttons ;(

</div>

​

<div class="qamain m-5 mt-0" data-question-id="1">

  <div class="card mb-3">

    <div class="card-header white">

      <div class="clearfix">

        <span class="float-left">

          Question <span class="qnumber">1</span>.

        </span>

        <span class="float-right"><a class="red-text remove-question" href="javascript:;">Remove</a></span>

      </div>

    </div>

    <div class="card-body">

      <form>

        <div class="md-form mt-0 mb-2 question">

          <input type="text" class="form-control" name="question">

          <label for="question">Question text</label>

        </div>

      </form>

​

      <hr />

​

      <form>

        <div class="form-group mb-2 answer">

          <label for="answer" class="mr-md-2">Answer 1. </label> 

          <a href="javascript:;"><i class="fa fa-times-circle red-text remove-answer" aria-hidden="true"></i></a>

          <div class="form-check">

            <input class="form-check-input" type="checkbox" name="answer" data-answer-index="{{answerId}}">

          </div>

          <input type="text" class="form-control" name="answer" data-answer-index="{{answerId}}" />

        </div>

    <div class="form-group mb-2 answer">

          <label for="answer" class="mr-md-2">Answer 2. </label> 

          <a href="javascript:;"><i class="fa fa-times-circle red-text remove-answer" aria-hidden="true"></i></a>

          <div class="form-check">

            <input class="form-check-input" type="checkbox" name="answer" data-answer-index="{{answerId}}">

          </div>

          <input type="text" class="form-control" name="answer" data-answer-index="{{answerId}}" />

        </div>

        <div class="form-group mb-2 answer">

          <label for="answer" class="mr-md-2">Answer 3. </label> 

          <a href="javascript:;"><i class="fa fa-times-circle red-text remove-answer" aria-hidden="true"></i></a>

          <div class="form-check">

            <input class="form-check-input" type="checkbox" name="answer" data-answer-index="{{answerId}}">

          </div>

          <input type="text" class="form-control" name="answer" data-answer-index="{{answerId}}" />

        </div>

      </form>

    </div> 

    <div class="card-footer"><button type="button" class="btn btn-primary btn-sm add-answer"><i class="fa fa-plus" aria-hidden="true"></i> Add answer</button></div>

  </div>

</div>

​

<div class="p-5">

  Second example demonstrates one question with three possible answers, two of them are true and one is false, but here we add LABEL to checkboxes

</div>

​

<div class="qamain m-5 mt-0" data-question-id="1">

  <div class="card mb-3">

    <div class="card-header white">

      <div class="clearfix">

        <span class="float-left">

          Question <span class="qnumber">1</span>.

        </span>

        <span class="float-right"><a class="red-text remove-question" href="javascript:;">Remove</a></span>

      </div>

    </div>

    <div class="card-body">

      <form>

        <div class="md-form mt-0 mb-2 question">

          <input type="text" class="form-control" name="question">

          <label for="question">Question text</label>

        </div>

      </form>

​

      <hr />

​

      <form>

        <div class="form-group mb-2 answer">

          <label for="answer" class="mr-md-2">Answer 1. </label> 

          <a href="javascript:;"><i class="fa fa-times-circle red-text remove-answer" aria-hidden="true"></i></a>

          <div class="form-check">

            <input class="form-check-input" type="checkbox" name="answer" data-answer-index="{{answerId}}">

            <label>Is answer IS SHOWN</label>

          </div>

          <input type="text" class="form-control" name="answer" data-answer-index="{{answerId}}" />

        </div>

    <div class="form-group mb-2 answer">

          <label for="answer" class="mr-md-2">Answer 2. </label> 

          <a href="javascript:;"><i class="fa fa-times-circle red-text remove-answer" aria-hidden="true"></i></a>

          <div class="form-check">

            <input class="form-check-input" id="answer_2" type="checkbox" name="answer" data-answer-index="{{answerId}}"> 

            <label for="answer_2">Is answer - clickable</label>

          </div>

          <input type="text" class="form-control" name="answer" data-answer-index="{{answerId}}" />

        </div>

        <div class="form-group mb-2 answer">

          <label for="answer" class="mr-md-2">Answer 3. </label> 

          <a href="javascript:;"><i class="fa fa-times-circle red-text remove-answer" aria-hidden="true"></i></a>

          <div class="form-check">

            <input class="form-check-input" type="checkbox" name="answer" data-answer-index="{{answerId}}">

            <label>Is answer - not clickable</label>

          </div>

          <input type="text" class="form-control" name="answer" data-answer-index="{{answerId}}" />

        </div>

      </form>

    </div> 

    <div class="card-footer"><button type="button" class="btn btn-primary btn-sm add-answer"><i class="fa fa-plus" aria-hidden="true"></i> Add answer</button></div>

  </div>

</div>

​

<div class="p-5">

  The same situation happens when I work with radiobuttons. If no label is defined no radiobuttons are shown, I just copied an examples from MDB Radiobuttons page and removed labels

</div>

​

<div class="form-check">

  <input type="radio" class="form-check-input" id="materialUnchecked" name="materialExampleRadios">

</div>

<div class="form-check">

  <input type="radio" class="form-check-input" id="materialChecked" name="materialExampleRadios" checked>

</div>