HTML「スピナー」入力の表示を切り替える

Question

ラジオボックスがチェックされているかどうかに基づいて（questionに触発される）、CSSを使用してspanまたはinput要素の可視性を切り替える方法が見つかりました。

しかし、私はjQueryUIスピナーフォーマットを適用するとすぐにこのトグル効果を失います。

このjsFiddleは、span要素でCSSが正常に動作する方法を示しますが、inputでは正しく動作しません。実際、スピナーを適用するとすぐに、input全体が消えます。

これはなぜ起こっているのか、そしてCSSを使ってその可視性を切り替える方法を教えてください。

/* Control visibility of SPAN and INPUT (with jqueryui spinner class) 
cf. https://stackoverflow.com/questions/21269376/radio-button-show-hide-content 
*/ 

/*The span works fine*/ 
span#some-text { 
    display:none; 
} 
input#on-input:checked ~ span#some-text{ 
    display:inline; 
} 
input#systematic-input:checked ~ span#some-text{ 
    display:none; 
} 

/*The input is only visible when the spinner format isn't applied (i.e. commenting all CSS below this point). Even so, the hide/show effect doesn't work. Why?*/ 

/* 
input#spinner-on { 
    display:none; 
} 
input#on-input:checked ~ input#spinner-on{ 
    display:inline; 
} 
input#off-input:checked ~ input#spinner-on{ 
    display:none; 
} 
*/ 

Answer 1

jQueryUIスピナーはspan要素内の入力をラップ：

は、ここで私はフィドルに使用しているCSSのです。

あなたの指定した新しい範囲にスピナー入力をラップし、それに応じてCSSを適用します。

span#spinnerWrapper { 
    display:none; 
} 
input#on-input:checked ~ span#spinnerWrapper{ 
    display:inline; 
} 
input#off-input:checked ~ span#spinnerWrapper{ 
    display:none; 
} 

チェックこのjsFiddle

http://jsfiddle.net/scc0jyns/2/