选定的收音机不会更改jquery颜色按钮

时间:2015-04-20 16:29:27

标签: javascript jquery html jquery-mobile

我有一个表格请检查一个任务列表,我的想法是当一个任务被标记为按钮改变颜色,而后台改变了我的问题是什么?

部分代码:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
         $(function() {
$('#popupDialog').click(function() {


if($(this).select()) { 

   $('#ba700')
   .buttonMarkup({ theme:"b" })

  }
})});
    </script>        
</head>
<body>
    <div data-role="page" data-theme="a" >
            <div data-role="header" data-position="inline">
                <div class="logo"><a href="control.html"><img src="http://10.0.210.26/control/logo_utryt.png" width="40%"alt=""/></a></div>
            </div>
        <div data-role="content" data-theme="a">
        <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-check">
        <a href="vagon1.html"  class="ui-btn footer-button-right ui-btn-icon-right ui-icon-check ui-state-disabled">Vagón 1</a>
        <a href="vagon2.html" class="ui-btn footer-button-right  ui-btn-icon-right ui-icon-check">Vagón 2</a>
        <a href="vagon3.html" class="ui-btn footer-button-right  ui-btn-icon-right ui-icon-check">Vagón 3</a>
        <a href="#" class="ui-btn ui-btn-icon-right ui-icon-mail">Enviar</a>
        </div>

            <div data-role="controlgroup">
<div class="grid grid-pad">
   <div class="col-1-3">
     <div class="module">
     <a href="#popupMenu" id="popupm" data-role="button" data-rel="popup" data-position-to="window"  data-transition="pop" >
     <h1>Dispositivos de Recaudo</h1></a>
     <div data-role="popup" id="popupMenu" data-theme="a" data-dismissible="false" >
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>    
     <div data-role="collapsibleset" id="popupDialog" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" >
     <div data-inset="false" id="ba700" data-role="collapsible" data-theme="a">
            <h2>BA700</h2>
            <ul data-role="listview" >
            <form id="form"><fieldset data-role="controlgroup"><input type="radio" name="radio-v-m" id="radio-v-m" >
            <label for="radio-v-m">Si</label><input type="radio" name="radio-v-m" id="radio-v-1m">
            <label for="radio-v-1m">No</label>
            <textarea data-mini="true" cols="40" rows="8" name="textarea-4" id="textarea-4" placeholder="Observación"></textarea>
            </fieldset>
            </form>       
            </ul>
            </div>

此代码更改后面的主题,但我想在选择收音机标记时更改按钮的主题

任何帮助,请

1 个答案:

答案 0 :(得分:0)

假设您希望在单击单选按钮时更改可折叠的主题。在单选按钮上添加一个值,以便我们知道选择了哪一个:

<input type="radio" name="radio-v-m" id="radio-v-m" value="0" />
<label for="radio-v-m">Si</label>
<input type="radio" name="radio-v-m" id="radio-v-1m" value="1" />
<label for="radio-v-1m">No</label>

然后在脚本中处理单选按钮的更改事件,找出选择了哪一个,然后根据需要更改可折叠主题

$('input[name="radio-v-m"]').on("change", function(){
    var val = $('input[name="radio-v-m"]:checked').val();
    if (val == '0'){
        $(this).closest(".ui-collapsible").collapsible( "option", "theme", "b" );
    } else {
        $(this).closest(".ui-collapsible").collapsible( "option", "theme", "a" );
    }    
});
  

正在使用 DEMO