yello yello - 3 days ago 5
Javascript Question

jquery / js: can't make radio button clickable

I have a little beginners problem, I can't make buttons inside a DIV clickable.

There is a top line of 5 buttons that work perfectly. On click a 2nd row will appear (and does), but I can't click them. Why is that?

This is the link: https://jsfiddle.net/yello/1me8naee/

Code:



$(document).ready(function() {
$('#div1,#div2,#div3').hide();
$('#mod-7').click(function() {
$('#div1').show('fast');
$('#div2').hide('fast');
$('#div3').hide('fast');
});
$('#mod-7p').click(function() {
$('#div1').show('fast');
$('#div2').hide('fast');
$('#div3').hide('fast');
});
$('#mod-6s').click(function() {
$('#div1').hide('fast');
$('#div2').show('fast');
$('#div3').hide('fast');
});
$('#mod-6p').click(function() {
$('#div1').show('fast');
$('#div2').hide('fast');
$('#div3').hide('fast');
});
$('#mod-se').click(function() {
$('#div1').hide('fast');
$('#div2').hide('fast');
$('#div3').show('fast');
});
});

.segmented {
padding: 12px;
}

.segmented input[type=radio] {
display: none;
}

.segmented label {
border: outset 1px silver;
padding: 2px 16px;
margin-right: -5px;
background: #ddd;
cursor: pointer;
}

.segmented input:checked + label {
border: inset 1px silver;
background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="segmented">
<input type="radio" name="mod-1" value="Organisation" id="mod-7">
<label for="mod-7">iPhone 7</label>

<input type="radio" name="mod-1" value="Users" id="mod-7p">
<label for="mod-7p">iPhone 7 Plus</label>

<input type="radio" name="mod-1" value="Units" id="mod-6s">
<label for="mod-6s">iPhone 6s</label>

<input type="radio" name="mod-1" value="Tags" id="mod-6sp">
<label for="mod-6sp">iPhone 6s Plus</label>

<input type="radio" name="mod-1" value="Tags2" id="mod-se">
<label for="mod-se">iPhone SE</label>


<div align="center" style="padding:25px;width: 300px;">

<div id="div1">
<input type="radio" name="mem" id="32" value="32">
<label for="mem">32Gb</label>
<input type="radio" name="mem" id="128" value="128">
<label for="mem">128Gb</label>
<input type="radio" name="mem" id="256" value="256">
<label for="mem">256Gb</label>
</div>

<div id="div2">
<input type="radio" name="mem" id="32" value="32">
<label for="mem">32Gb</label>
<input type="radio" name="mem" id="128" value="128">
<label for="mem">128Gb</label>
</div>

<div id="div3">
<input type="radio" name="mem" id="32" value="32">
<label for="mem">32Gb</label>
<input type="radio" name="mem" id="64" value="64">
<label for="mem">64Gb</label>
</div>

</div>

</nav>




Answer

Your code is working perfectly fine. You only need to add ids to the labels.

E.g

   <div id="div1">
      <input type="radio" name="mem" id="32" value="32">
      <label for="32">32Gb</label>
      <input type="radio" name="mem" id="128" value="128">
      <label for="128">128Gb</label>
      <input type="radio" name="mem" id="256" value="256">
      <label for="256">256Gb</label>
    </div>

https://jsfiddle.net/1me8naee/12/

Also you should have the ids specific to each model, otherwise there will be conflict e.g 32 iphone 6 and 32 iphone 7.

Comments