<input type='checkbox' id='price1' value=''> <input type='text' placeholder='Precio de Venta' name='price["sale"]'>
<input type='checkbox' id='price2' value=''> <input type='text' placeholder='Precio de Alquiler' name='price["rent"]'>
#type {
max-width: 50%;
border: 1px solid #eee;
}
#type > .item {
display: block;
margin: 5px 0px;
padding: 9px 0px;
}
#type > .item > .input { display: inline-block; }
#type > .item > .hide { visibility: hidden; }
#type > .item > .input > input[type='text'] {
padding: 0.8em 1em;
font-size: 0.85em;
border: 1px solid #eee;
color: #a3a3a3;
background: white;
outline: none;
width: 50%;
-webkit-appearance: none;
}
$('#type :checkbox').change(function(){
$(this).parent('.item').find('.input').toggleClass('hide', (!$(this).is(':checked')));
});
No te recomendaría usar listas para estas cosas y menos de la manera de la que lo estas haciendo. El código JS como ves se puede reducir muchísimo empleando
toggleClass().
Demohttp://jsfiddle.net/drvy/md23r0jk/1/PD: No uses estilos dentro del HTML, es feo y poco organizado.
Saludos